zzoyu/vue-pixel-editor

A pixel art editor on web

• 👋 Hi, I’m @zzoyu
• 👀 주 관심 분야는 FE, UI/UX, 게임, 임베디드 펌웨어입니다. 사용자와 상호작용하는 모든 것들을 좋아합니다.
• 🌱 현재 Vue.js / Nuxt.js 위주로 개발하고 있습니다.

• 📫 [email protected]

vue-pixel-editor's Issues

네모 그리기

네모네모빔

(JS-0387) Prefer that unbound methods are called with their expected scope

Description

Warning is raised when a method is used outside of a method call. Class functions don't preserve the class scope when passed as standalone variables.

Occurrences

There are 5 occurrences of this issue in the repository.

See all occurrences on DeepSource → deepsource.io/gh/zzoyu/vue-pixel-editor/issue/JS-0387/occurrences/

터치 지원

마우스 이벤트 뿐만 아니라 터치 이벤트도 받도록 수정 필요

캔버스 크기 수정

1차 - 단순 사이즈 조절 포토샵처럼 여백 위치 지정
2차 - 전체 레이어 스케일 조정

잠금 상태에서 그리기 되는 이슈 수정

(JS-0611) Avoid mutation of component props

Description

Props and events should be preferred for parent-child component communication, instead of this.$parent or mutating props. When Vue re-renders your component — which happens every time something changes — it will overwrite any changes you have made to your props. This means that even if you try to mutate the …

Occurrences

There is 1 occurrence of this issue in the repository.

See all occurrences on DeepSource → deepsource.io/gh/zzoyu/vue-pixel-editor/issue/JS-0611/occurrences/

직선 그리기

직선을 그립니다.
마우스 클릭 위치가 시작점, 마우스 이동 위치가 끝점이 될 것 같습니다.
마우스 클릭을 풀 때까지 미리보기 상태가 유지된 후, 클릭 해제 시 해당 위치가 확정 상태가 됩니다.
캔버스 밖으로 마우스를 이동해도 클릭 상태가 유지되어야 합니다.

레이어를 삭제 시, 다음 우선순위 레이어가 자동 선택되도록 수정

토스트 알림

실행취소 다시실행 등 굵직한 동작 수행 시 토스트 알림을 해줄 알림 ui가 필요함. Plugin으로 구현하는 방법을 고민해봐야함

동그라미 그리기

동글동글빔

1. 마우스 최초 클릭 지점을 원의 중심으로, 현재 커서 위치를 r 값으로 -> 이게 좀 더 편하지 않나
2. 마우스 최초 클릭 지점에서 현재 커서 위치에 내접하는 원을 그리기 -> 일반적인 그림판 로직

둘 다 제공 후 단축키 클릭 상태에 따라 다르게 동작하는 것이 가장 적절할 것으로 생각됨.

(JS-0242) Use `const` declarations for variables that are never reassigned

Description

Variables that are not re-assigned are referred to as constant variables. So, we recommend using const for such variables instead of let to define because the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared and also reduces cognitive load …

Occurrences

There are 3 occurrences of this issue in the repository.

See all occurrences on DeepSource → deepsource.io/gh/zzoyu/vue-pixel-editor/issue/JS-0242/occurrences/

실행 취소 & 다시 실행

구현을 어떻게 할 것인지 고민이 필요.
히스토리 역추적 방식 또는 스냅샷?
스냅샷은 메모리 낭비가 심할 것 같고 오브젝트가 많아 딥카피가 어려움
동작을 수행할 때마다 스택을 쌓아야 할 것인가? 실제 구현 사례를 찾아봐야 할 것

자동 확대/축소 버튼

• 캔버스 화면 크기에 맞추기
• 1:1보기 옵션

채우기

그림판 채우기와 동일한 기능입니다.
2차원 배열에서 재귀함수로 dfs를 구현하면 될 것 같습니다.

그리기 클릭 전에 미리보기

마우스 커서 위치에 어떤 색상이 어떤 모양으로 그려질지 미리보기 하는 기능입니다.

Github action 수정

Pull request용 스크립트 작성
Lint, Build까지만 하며 배포하지 않도록 처리 또는 메인 스크립트에서 분기 처리

스케일은 음수가 될 수 없음

마우스 휠로 스케일 조정 시 음수가 가능한 현상
최소 0.5배로 제한

공통 다이얼로그 컴포넌트

드래그 이동, 접기 기능을 탑재한 일반 팝업창과
모달 다이얼로그로 활용 가능한 베이스 컴포넌트 작성

미리보기 다이얼로그

드래그로 자유 이동 가능한 미리보기 다이얼로그.

• 타일링 옵션 : 캔버스를 반복하여 보여줌
• 확대 축소
• 사용한 컬러 리스트 -> 색상 변경도 가능?