-
Notifications
You must be signed in to change notification settings - Fork 1
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
[#15] 캔버스 내보내기, 불러오기 #16
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
결국 png 로 다운로드만 구현되나보군요. 캔버스 자체를 내보내고 가져오려면 스펙이 훨씬 정형화되긴 해얄거 같아요.
캔버스 list 랑 각 property 값들을 json 으로 내보내고 받아올 수 있어얄거 같은데 시간이 되신다면 한번 고민해보시면 재밌을거 같아요.
커밋을 작게 잘 나누시는 거 같아서 보기 좋습니다.
src/components/layout/Header.js
Outdated
const buffer = await file.arrayBuffer(); | ||
this.readFile(buffer); | ||
} catch (error) { | ||
console.error('파일 불러오기 실패:', error); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
로그만 남기는 에러 핸들링은 무의미해보여요.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
현재 png 뿐만 아니라 bin 파일로 레이어 내보내기,레이어 불러오기도 구현했습니다!
멘토님 말씀대로 캔버스 레이어 list를 통해 json 값을 가져오고 bin 파일로 내보내기, 불러오기를 하고 있습니다.
처음엔 json 파일로 내보내기, 불러오기를 진행했는데 사용자가 파일을 열어 수정하는 것을 원치 않아서 수정 했습니다.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
bin 선택 좋네요.
@@ -66,7 +104,7 @@ export default class CanvasArea extends HTMLElement { | |||
render() { | |||
this.innerHTML = ` | |||
<div class="canvas-wrapper"> | |||
<canvas id="drawingCanvas" width="${this.width}" height="${this.height}"></canvas> | |||
<canvas id="drawingCanvas" ></canvas> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<canvas id="drawingCanvas" ></canvas> | |
<canvas id="drawingCanvas"></canvas> |
connectedCallback() { | ||
this.render(); | ||
const buttonHandlers = { | ||
'download-button': this.handleDownload, | ||
'export-button': this.handleExport, | ||
'import-button': this.handleFileImport, | ||
}; | ||
|
||
Object.entries(buttonHandlers).forEach(([id, handler]) => { | ||
this.querySelector(`#${id}`).addEventListener('click', handler); | ||
}); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이렇게 보면 함수의 역할이 connectedCallback 이 아니라 init 같긴하네요...
this.currentProperty.opacity = Number(opacity); | ||
this.currentProperty.opacity = opacity; | ||
}); | ||
eventBus.on('TEXT_CHANGED', ({ text }) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
changed 보다는 update 같기도 하네요.ㅎㅎ
Quality Gate passedIssues Measures |
Related Issue : #15
구현 기능