support to control the scale with a matrix

[easylogic]

Figma 정도 되는 matrix 연산을 해보자.

1. 멀티 아트보드를 구현한다.
2. 아트보드는 2가지로 선택 할 수 있다.
   • 제목을 선택할 때
   • 선택 영역이 artboard 영역 전체를 포함할때
3. selection 을 할 때
   • 한 개 일 때는 transform 까지 모두 적용된 형태
   • 여러개 일 때는 최소/최대 값에 대한 좌표를 이용해 bounded rect 를 구한다. 그런 다음에 영역을 만든다.

[easylogic]

단일 셀렉션 이후에 rotate 한 것을 scale 을 할 수 있게 됐다. 4방향 모두 할 수 있게 됐다. 꼭지점 말고 그냥 중간 방향도 해야하나 고민중이다.

[easylogic]

group 으로 matrix 를 적용하고 복원해보자.

[easylogic]

ParentMatrix localMatrix = Group Matrix localMatrix

[easylogic]

group rotate * scale 구현중

bottom right, top right 는 구현 했고 bottom left 와 top left 는 구현 해야함.

여러가지로 많은 시행착오를 겪었지만 일단 기본적인 사항은 할 수 있을 듯

다만 css 로 이루어진 렌더링이라 도형이 찌그러질 수 밖에 없는 상황에서도 찌그러지면 안됨 ..

그래서 실제로 선택한 영역이랑 다른 결과들이 나옴...

이건 너무 너무 고민이 많다.

[easylogic]

group 의 rotation 과 scale 을 구현했다.

svg path 의 bounding box 를 재구성해야한다.

[easylogic]

• [x] 에디터의 scale 을 matrix 로 가지고 있다가 연산할 수 있도록 했다.
• [x] guide line 을 verties 개념으로 다시 작성해야한다. (이렇게 할려면 수많은 객체의 현 상태의 verties 를 누군가는 캐슁하고 있어야 한다)
  • [x] snap to object 를 구현해보자.
• [x] group, ungroup 을 matrix 기반으로 다시 맞춰야한다.
• [x] artboard 셀렉팅 하는 방법을 연구해야한다.
  • [x] 제목
  • [x] 전체 선택
• [x] path 의 bounding box 를 적용하자
• 멀티아트보드는 어떻게 해야할까?

[easylogic]

https://github.com/easylogic/design/pull/1

[easylogic]

path 가 변경되어도 bouding box 기준으로 레이어를 다시 맞추도록 했다.

[easylogic]

artboard 선택 기준으로 바꿨다.

이건 나중에 multi artboard 에도 똑같이 적용된다.

[easylogic]

• [x] move 에 대한 snap 은 구현
• [x] resize 에 대한 snap 구현 필요
• [x] snap guide line 렌더링 필요

[easylogic]

guide line 잡는 것 까지 했기 때문에 이 이슈는 닫고

이후의 기능은 새로운 이슈로 시작하겠습니다.