0.4 - Githubissues

easylogic commented 5 years ago

[x] layer lock (can't selection)
[ ] copy & paste layer for selections
[ ] support common opacity for color steps
[x] support Group layer
[ ] import sketch file
[ ] import xd file
[x] Managed tool config
[ ] add new layer type (image, video, canvas, svg, etc ...)
- [ ] multi tree cache
[ ] CSS shape editor
- [ ] path editor
- ~~[ ] svg editor~~
[ ] Support layer transform visual ui
[ ] Support easing gradient colorstep as cut feature
[ ] support cloud system
- [ ] save all pages
- [ ] save indivisual layer or image (Gradient)
- [ ] layer
- [ ] gradient
- [ ] page
[ ] Support timeline for animation
- [x] property editor
- [ ] keyframe editor
- [ ] timing editor
[ ] Export CSS & JS Animation
[ ] Support variable
[ ] ordered filter
[ ] zoom in/out canvas size
[ ] Support https://github.com/cyanharlow/purecss-francine

easylogic commented 5 years ago

command와 action 을 분리 해야할까?

command ? => 유저가 실행한는 최초 명령 (파라미터를 포함)
action ? => command 이후에 일어나는 비지니스 로직 (어떤 것이든 될 수 있음)

일단 유저는 command 만 호출 가능 , Action 은 command 에서 호출하는 것으로 정함.
즉, 유저는 action 을 호출할 수 없음.

우왕 그럼 지금까지 만들었던 구조를 따 엎어야 하나.....

easylogic commented 5 years ago

[x] 중간에 그려지는 캔버스 공간에 대한 좌표값을 항상 가지고 있을 수 있는 방법은 뭘까?
- 특정 상황에 캐쉬 되도록 구성함

easylogic commented 5 years ago

[x] Support short tag for not supported elements (like )
[x] Split getter to pure function
[x] item search list caching

easylogic commented 5 years ago

easylogic commented 5 years ago

easylogic commented 5 years ago

검은색이 나은 것 같기도 하고

easylogic commented 5 years ago

처음부터 다시 만들고 있다.

모든 객체의 리팩토링이 필요하다.

project
artboard -> layer, directory, Layout, 
layer -> Rect, Circle, Shape, Layout 
Layout -> Rect, Circle, Shape, Layout 

Layout -> attribute 
attribute -> Filter, BackgroundImage, ClipPath ...

easylogic commented 5 years ago

중첩이 될때 몇가지 규칙이 필요하다.

모든 객체는 절대 좌표를 가진다.
Layout 은 표시 방법에 따라 하위 객체들의 절때 좌표를 지정해준다.
상위가 Layout 이면 Layout 의 방법에 따라 렌더링 하는 방식이 정해진다.

Layout 을 어디까지 해야할까?

position: absolute; position: relative;

display: inilne-block; display: block; display: flex; display: inline-flex; display: grid;

easylogic commented 5 years ago

중첩된 layer 를 다룰려니 할게 많군.

CanvasView 에서 총 4가지 선택 사항이 있다. artboard, layer(절대좌표), layer(상대좌표 중에 상위 Layer 가 layout 을 가진 ), area (드래그 영역)
개별 사항을 선택 할려면 어떻게 해야하나?
- artboard-title 클릭
- drag 해서 layer 클릭 (drag 를 하는 것은 상대좌표를 선택하지 않는다.)
- click 해서 layer 선택
- layer 가 상위 레이아웃의 자식이면 resize component를 표현하지 않는다.
- 이 경우 오직 상위 레이아웃에 의해서 위치가 정해지게 되는데
- 자식 layer 가 개별 영역을 가지고 flex: none 같은 값을 가지게 되면 스스로 크기를 변화시킬 수 있다.
- 다만 이 경우도 위치 이동은 레이아웃 엔진의 영향을 받는다.

easylogic commented 5 years ago

[X] grid layout 기본 에디터 완성 하위 요소가 grid 내의 위치를 가져야 하는데 이건 editor 를 어떻게 표현해야할지 모르겠다.
그리드 에디터 내 요소를 클릭한다.
선택된 요소가 isLayoutItem 이면 itemresizer 를 표시 해준다.
itemResizer 는 좌표 변환 하는 것이 아니고 각 영역을 옮겨다닐 수 있도록 해준다.
요소 에디팅을 할 때는 그 요소만 표시한다 .
방향은 기본 resizing 방향이랑 같고 드래그 할 때 위치가 각 cell 의 위치이면 그것에 따라 row, column 을 지정한다.

easylogic commented 5 years ago

드래그 할 때 마우스 포지션의 위치가 preview element 와 일치하면 그걸로 바꿈. 하지만 move 는 어떻게 하지?

drag 하는 지점과 dx, dy 를 더해서 최종 지점이 preview element 인 경우 preview element 의 row 와 column 을 설정한다.

easylogic commented 5 years ago

기능에 대한 정의를 하자.

grid editor 는 어느 정도 만들었으니
inspector 에 대한 정의를 해보자.
구성을 어떻게 하면 빠르게 만들어 낼 수 있는가?
아니면 쉽게 만들어낼 수 있는가?
Inspector 만의 조립을 만들어내보자.
아니면 순수하게 데이타랑만 통신하는 Inspector 를 만들어보자.

일단은 grid editor 끝

easylogic commented 5 years ago

Background Property editor 를 만들고 있음
ColorPicker 와 Gradient Editor 를 통합함
Grid Editor 와 ColorPicker 가 공존해야 하는 상황이 옴
Grid Editor 를 단독으로 toggle 할 수 있는 기능이 필요함.

easylogic commented 5 years ago

Background Property 에서 순서가 필요함.

easylogic commented 5 years ago

Background Image 변경 하는건 다시 만들어야 할 듯 하다.
Tab 선택할 때 color, image 는 메세지를 새로 보내야할 것 같다.
image 는 고유한 자원으로 관리되어야 한다.
image url 을 보존하자. 메모리에 있던 이미지도 가지고 오자.

easylogic commented 5 years ago

이미지랑 컬러도 모두 image 로 저장 해야할 둣 하다. 대상을 명확히 하기가 어려우니 모두 같은 패턴으로 만들어서 로직을 공통적으로 적용하자

easylogic commented 5 years ago

FillPicker 에 color 속성을 빼고 static 으로 구조를 맞췄다.
FillPicker 는 이제 모든 데이탄는 gradient 와 image 만으로 되어 있다. 즉, 이미지 생성기가 된다.
FillPicker 에 있던 color 는 Background Color 로 독립하고 거기에 ColorPicker 를 추가할 예정
이제 Picker 는 기본적으로 ColorPicker 와 FillPicker 2개로 운영할 예정
나머지는 속성에 따라 UI 를 만드는 방식으로 하면 될 듯 하다.

easylogic commented 5 years ago

FillPicker 는 몇가지 컴포넌트에서 사용가능하다.
- background image
- border image
- mask image
Background Image 는 어느 정도 구현 되어 있고
BorderImage 와 Mask Image 는 구현을 해야한다.
규칙을 맞출 수 있으면 좋겠다.
Background 가 끝나면 -> Border 로 갔다가 -> Box 모델로 갈 예정이다.

easylogic commented 5 years ago

Border Image 는 Background Image 와 같은 형태로 처리하면 될 것 같고
Mask Image 는 Border Image 와 같은 형태로 처리하면 될 것 같다.

easylogic commented 5 years ago

할 수 있는 것부터 집중하고 나머지는 다음에 해보자.

easylogic commented 5 years ago

ColorPicker 를 재구성하고 Background Color 속성을 설정할 수 있게 했다.
이 와중에 몇가지 버그가 발견되었다.
- load 함수를 부를 때 이전과 이후의 html 코드가 같으면 업데이트를 하지 않았는데 , 그러다 보니 실제로 로드 할 때 load 펑션 자체가 예외 처리 되어서 향후 동작을 안함. 즉, html 이 추가가 되지 않음. 애매한 상황
- ColorPicker 를 열 때 다른 Picker 와 Popup 은 닫아야함. 다른 Picker 나 Popup 을 열 때 ColorPicker 도 닫아야함. Picker, Popup 닫기에 대한 규칙이 필요하 수 도 있음.
- 아니면 Selection 에 따른 에디터 열기에 대한 규칙을 바꿔야 할 수도 있음. 예를 들어 editor.selection.editor 에 실제로 연동 되어야 하는 editor 타입을 넣고 그것만 연다던가

easylogic commented 5 years ago

팝업이 열린 이후에 클릭 하는 시점에 내가 없으면 자동으로 닫는걸로 해야 할 듯 , 그렇지 않으면 새로운 컴포넌트가 올라갈 때마다 그것에 대한 예외 처리를 해줘야 한니깐.... 코드를 생각해보자.

[CLICK(document)] (e) { 
    var isInto = new Dom(e.target).isInto(this.$el)
    if (!isInto) { 
        this.$el.hide();
     } 
    // 마우스 포인트가 내 컴포넌트에 속하지 않으면 다는 걸로 
    // Picker, Popup 마다 추가 해야할 듯 
}

easylogic commented 5 years ago

isInto 는 target 부터 path 를 죽 올라오면서 그 path 안에 현재 this.$el 있으면 성공, 아니면 실패

easylogic / css

0.4 #5