Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feedback List #58

Open
7 of 10 tasks
easylogic opened this issue Jun 19, 2020 · 12 comments
Open
7 of 10 tasks

Feedback List #58

easylogic opened this issue Jun 19, 2020 · 12 comments
Assignees
Labels
enhancement New feature or request

Comments

@easylogic
Copy link
Collaborator

easylogic commented Jun 19, 2020

@easylogic easylogic self-assigned this Jun 19, 2020
@easylogic easylogic added the enhancement New feature or request label Jun 19, 2020
@j2l
Copy link

j2l commented Jun 19, 2020

I didn't ask for import since it's tricky. But if you're at it, would you please consider adding import format from https://rive.app (animated, json) and SVG.
If not possible, no problem.

@easylogic
Copy link
Collaborator Author

@j2l Good idea!

But i don't know about rive.app well.

I will study rive.app.

@wfedev
Copy link

wfedev commented Jun 28, 2020

윈도우로 접속하고 크롬에서 몇가지를 테스트 해보았습니다.

  • 단축키
    단축키를 한번 눌렀을때 다른 단축키로 바로 변경 가능하게 수정
    (m 누르고 -> v 를 누르면 바로 변경이 안됨)

  • R 단축키는 2D 360도 회전으로 변경

  • 아이콘
    v 를 눌렀을때 기본 세모화살표 모양 화살표 아이콘으로 표시
    p 를 눌렀을때 펜촉 아이콘으로 표시
    b 를 눌렀을때 브러쉬 아이콘으로 표시

  • alt 누르고 마우스 휠로 확대 축소 하면

  1. 소수점 단위로 확대/축소됨
  2. 화면 중심점이 이동되면서 확대/축소됨
  • 화면 상하좌우 이동
    다른 플랫폼에서는 아트보드에서 화면을 이동할 때
    스페이스바를 누른채로 손모양 아이콘이 나온다음 마우스 왼쪽을 화면 아무곳이나 클릭하고
    그대로 상하좌우 화면을 이동하면 이동됨 (스페이스바 + 마우스왼쪽클릭 + 드래그)
    (노트북 사용할때는 그냥 패드를 이동하면 되었는데 윈도우에서 좌우 화면 이동이 안됨)

  • 실행취소
    이전으로 되돌리기 ctrl + z 가 꼭 필요★★★★★

  1. 그룹으로 묶은다음 해제하는 단축키 외에 이전으로 실행취소
  2. 도형을 이동시켰을때 이전 좌표로 실행취소
  3. 펜툴로 좌표를 찍었을때 이전 좌표는 삭제할수 있도록 실행취소
  • Rotate
  1. Rotate 를 적용하고 xyz를 삭제하는 버튼을 누르면 삭제가 안됨
  2. Rotate 아예 초기화 하는 버튼이 있으면 좋겠음
  3. Rotate range를 좌우로 드래그하면 이미지 형태로 드래그됨
    image
  • text
    text를 추가하면 텍스트가 세로로 추가되는 현상
    image

  • Pen
    Pen 툴을 사용하고 패스를 닫아도 펜툴을 그대로 사용할수있게 유지

  • 아트보드
    지금 도형을 그리면서 사용하고 있는 아트보드 화면에서 아트보드를 옆에 새로 추가하고 싶음
    (현재 : 아트보드를 새로 추가하면 새로운 화면으로 추가됨)

  • 레이어 상하 이동
    도형 여러개를 그룹으로 묶은다음 레이어를 단축키를 사용하여 위로 계속 올리면 도형이 사라짐
    -> 레이어를 위로 올리면 그룹 밖으로 나가져서 계속 올라가거나 반대로 내릴때에도 그룹 밖으로 내려가는 기능으로 수정

  • 그룹 레이어 접었다 펴는 기능 추가

@easylogic
Copy link
Collaborator Author

@wfedev 우왕 소중한 리뷰 감사합니다. 이거 일단 어떻게 진행할지 제가 고민을 좀 해보고 답변을 정리 해드릴게요. ^^

@easylogic
Copy link
Collaborator Author

easylogic commented Jun 28, 2020

@wfedev 에디터 자체 구조적인 부분이랑 기능 적인 부분을 분리해서 개발할려고 합니다.

기능적인 부분

    • 그룹 레이어 접었다 펴는 기능 추가 - support layer item folding feature  #66
      • 이건 어렵지 않게 넣을 수 있을 것 같아요.
    • Rotate
      • 값을 제거 할려면 동그라미를 더블클릭 하면 됩니다. UI 를 따로 빼야할 것 같네요.
      • - 를 눌러도 안지워 지는 버그 수정 했습니다.
    • 단축키
      • 이건 제가 너무 단순하게 구현한 듯 합니다. ^^ 말씀 주신 대로 전체 구조상에서 봐야 할 것 같네요.
      • 상태별로 단축키 전환 시키는 것을 했습니다
    • R 단축키는 2D 360도 회전으로 변경
      • 2D 회전을 단축키로도 하시나요? 이건 정확히 어떤 인터랙션인지 잘 모르겠어요.
      • 예를 들어 객체 선택 후에 R 을 선택하면 회전모드로 변화하는걸 말씀 하시나요?
    • 아이콘
      • 화면상에 아이콘 변경하는 기능이 없어서 추가 해야할 것 같습니다.
      • 이미지로 넣어 볼려고 하는데요. cursor 용 이미지가 따로 필요할 것 같아요.
    • text
      • 여긴 기본 크기를 넣지 않아서 생기는 문제라 수정 해둘게요.
      • ~기본 크기 추가 했어요. ~
    • alt 누르고 마우스 휠로 확대 축소 하면
      • 화면 확대, 축소에 대한 단축 키가 있는데요 ( - : 축소, = : 확대)
      • 문제는 이게 캔버스가 아니라 DOM 기준으로 가운데를 기준으로 확대하는 기능이 없어서 기능을 어떻게 구현해야할지 아직 좀 애매한 상태입니다.
      • wheel 기능은 예전에 넣어두고 안 지웠나보네요. ㅠㅠ 일단은 이건 난이도 보다 구현패턴이 정리가 되어야 해서 나중에 넣어둘게요.
    • 화면 상하좌우 이동
      • 화면 상하좌우는 현재는 스크롤만 하면 되는데요.
      • 스페이스를 누르고 드래그하는건 괜찮은데 이런식으로 많이 쓰시나요?
      • 일단 화면 이동을 스페이스 누르고 드래그 하는걸로 하게 되면 위에 마우스 휠도 좀 더 심플하게 구성이 가능 할 듯 합니다.
    • Pen
      • path 를 여러개 추가 하면 개별 객체로 되길 원하시나요? 아님 하나의 패스로 되길 원하시나요?
      • 일단 패스를 한번에 끝내지 않고 여러 패스를 연속으로 입력 할 수 있도록 했습니다.
      • ~패스의 시작점과 끝점을 맞추면 바로 입력이 되고 그렇지 않을 경우 enter 를 치면 입력이 되고 다음 패스를 그릴 수 있습니다. ~
    • 레이어 상하 이동
      • 이건 버그라 다시 봐야할 듯 합니다.
    • Support shortcut for layer tree
    • Support drawing text path
    • 실행취소
      • history 관리하는 기능을 추가해야할 듯 합니다.
      • 기능이 좀 복잡할 수 있어서 아마도 조금 오래 걸릴 수도 있을 것 같아요.
    • Support to import sketch and figma files

구조적인 부분

    • 아트보드
      • 이건 객체간의 이동이 정리되면 해볼 수 있을 것 같아요.
      • https://github.com/easylogic/editor/tree/fullchange 여기서 진행
      • 아트보드 하나 관리하는 부분이랑 완전히 다르게 표현이 되어야 해서 프로젝트를 분리 진행할 예정입니다. (오랜기간이 안걸릴 수 있도록 해볼게요.)

기능 적인 부분을 난이도에 따라서 먼저 하고 , 구조적인 부분을 진행하는게 좋을 것 같습니다.

@wfedev
Copy link

wfedev commented Jun 28, 2020

  • R 단축키는 2D 360도 회전으로 변경
    예를 들어 객체 선택 후에 R 을 선택하면 회전모드로 변화하는걸 말씀 하시나요?
    => 넵!! 맞습니당!!

  • 화면 상하좌우 이동
    화면 상하좌우는 현재는 스크롤만 하면 되는데요.
    스페이스를 누르고 드래그하는건 괜찮은데 이런식으로 많이 쓰시나요?
    => 넵넵 윈도우를 사용했을때 adobe 제품은 스페이스 누르고 드래그해욤 😆

  • Pen
    path 를 여러개 추가 하면 개별 객체로 되길 원하시나요? 아님 하나의 패스로 되길 원하시나요?
    => 음.. 패스가 닫혀서 도형을 완성시키고 나면 펜툴이 선택되어있는게 취소가 되는데
    펜툴이 그대로 유지되서 다시 p를 누르지 않아도 새로운 패스를 그렸으면 합니당

위에 말씀드렸던 몇가지 버그가
맥에서는 발견되지 않는데 윈도우에서 사용하면 보게 되는거 같아요.
사용환경 같이 테스트해보고 중간중간에 정리해서 이슈에 남겨놓을게요 화이팅이에요!! 👏👏

@easylogic
Copy link
Collaborator Author

@wfedev

artboard 보드 여러개 출력하는거는 구조를 생각보다 많이 바꿔야 하네요. (지금은 하나를 기준으로 하다보니)
아마도 디자인의 목적에 따라 툴을 분리 해야할 것 같습니다.
요걸 먼저 확인 한건 ... 지금 레이어 관리하는 체계랑 중간 중간 다른 부분들이 좀 있어서요. ^^

구조 분리 되면 아마도 도메인도 레파지토리를 따로 분리해서 관리해야할 것 같습니다.
정리되면 다시 말씀드릴게요.

@easylogic
Copy link
Collaborator Author

@wfedev

artboard 분리된건 https://design.easylogic.studio 에서 업데이트 할 예정입니다.
레파지토리 분리 했고 구조를 좀 바꿨어요. (layer tree 에서 artboard 도 같이 나오도록)

이건 어느정도 안정화 되면 다시 말씀 드릴게요.
코드는 https://github.com/easylogic/design 에서 관리합니다.

@easylogic
Copy link
Collaborator Author

@wfedev

그룹으로 rotate 를 한 이후에 해제를 할려고 하니 css 기준으로 생각보다 많은 것을 고민해야하네요.

좀 더 고민해보고 되는 것과 안 되는 것을 분리해서 구현해야할 것 같습니다.

@easylogic
Copy link
Collaborator Author

오래 걸렸네요. 멀티 아트보드 적용하고 matrix 기반으로 좌표연산을 다 바꿔서 현재는 기본적인것은 하는 것 같아요.

@j2l
Copy link

j2l commented Jan 13, 2021

Can't read but good to see you keep it up!

@easylogic
Copy link
Collaborator Author

hi @j2l

Thank you.

The editor is going through a lot of changes.
Since we changed all coordinate operations to matrix-based and multi-artboard support, we are testing various things.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants