CanvasManager
Canvasへの描画処理を行うmodule
refactoringのしがいがありそうなコードだtakker.icon
https://github.com/odiak/draw/blob/3194c68347383f00faeb5a53f6d266433e4beb39/src/CanvasManager.ts#L556
各イベントごとに処理を書くのではなく、各機能ごとに処理をまとめたほうがきれいになりそうtakker.icon
switchを使う必要がなくなる
e.g.
擬似コードです
code:ts
const pen = {
tool: 'pen',
onmoousedown: this => {
if (this.drawingPath !== null) return;
this.drawingPath = {
id: generateId(),
color: this.strokeColor.value,
width: this.strokeWidth.value,
points: this.getPointFromMouseEvent(event),
isBezier: false,
offsetX: 0,
offsetY: 0
}
},
onmousemove: this => {
const { drawingPath } = this
if (drawingPath != null && !this.drawingByTouch) {
pushPoint(drawingPath.points, this.getPointFromMouseEvent(event))
this.tickDraw()
}
},
onmouseup: this => {
if (this.experimentalSettings.value.disableSmoothingPaths !== true) {
smoothPath(this.drawingPath, this.scale.value)
}
this.addDrawingPath()
},
// TODO: fall throughに対応する
ontouchstart: this => {
const p = this.getPointFromTouchEvent(event)
if (p != null) {
this.drawingPath = {
id: generateId(),
color: this.strokeColor.value,
width: this.strokeWidth.value,
points: p,
isBezier: false,
offsetX: 0,
offsetY: 0
}
this.drawingByTouch = true
return;
}
},
// ...
}
private handleMouseDown(event: MouseEvent) {
pen, eraser, lasso, hand
.find(({tool}) => this.actualCurrentTool === tool)?.onmousedown(this)
}
private handleMouseMove(event: MouseEvent) {
pen, eraser, lasso, hand
.find(({tool}) => this.actualCurrentTool === tool)?.onmousemove(this)
}
private handleGlobalMouseUp(event: MouseEvent) {
pen, eraser, lasso, hand
.find(({tool}) => this.actualCurrentTool === tool)?.onmouseup(this)
}
関数がtrueを返したら処理が終わるようにすれば、fallthroughっぽいことが実装できそうですね
ちょっと考えます