|
| 1 | +import { calculateNewBrushSize } from 'features/canvas/hooks/useCanvasZoom'; |
| 2 | +import { |
| 3 | + getIsFocused, |
| 4 | + getIsMouseDown, |
| 5 | + getScaledFlooredCursorPosition, |
| 6 | + snapPosToStage, |
| 7 | +} from 'features/controlLayers/konva/util'; |
| 8 | +import type { AddLineArg, AddPointToLineArg, AddRectArg, Layer, Tool } from 'features/controlLayers/store/types'; |
| 9 | +import type Konva from 'konva'; |
| 10 | +import type { Vector2d } from 'konva/lib/types'; |
| 11 | +import type { WritableAtom } from 'nanostores'; |
| 12 | + |
| 13 | +import { TOOL_PREVIEW_LAYER_ID } from './naming'; |
| 14 | + |
| 15 | +type SetStageEventHandlersArg = { |
| 16 | + stage: Konva.Stage; |
| 17 | + $tool: WritableAtom<Tool>; |
| 18 | + $isDrawing: WritableAtom<boolean>; |
| 19 | + $lastMouseDownPos: WritableAtom<Vector2d | null>; |
| 20 | + $lastCursorPos: WritableAtom<Vector2d | null>; |
| 21 | + $lastAddedPoint: WritableAtom<Vector2d | null>; |
| 22 | + $brushSize: WritableAtom<number>; |
| 23 | + $brushSpacingPx: WritableAtom<number>; |
| 24 | + $selectedLayerId: WritableAtom<string | null>; |
| 25 | + $selectedLayerType: WritableAtom<Layer['type'] | null>; |
| 26 | + $shouldInvertBrushSizeScrollDirection: WritableAtom<boolean>; |
| 27 | + onRGLayerLineAdded: (arg: AddLineArg) => void; |
| 28 | + onRGLayerPointAddedToLine: (arg: AddPointToLineArg) => void; |
| 29 | + onRGLayerRectAdded: (arg: AddRectArg) => void; |
| 30 | + onBrushSizeChanged: (size: number) => void; |
| 31 | +}; |
| 32 | + |
| 33 | +const syncCursorPos = (stage: Konva.Stage, $lastCursorPos: WritableAtom<Vector2d | null>) => { |
| 34 | + const pos = getScaledFlooredCursorPosition(stage); |
| 35 | + if (!pos) { |
| 36 | + return null; |
| 37 | + } |
| 38 | + $lastCursorPos.set(pos); |
| 39 | + return pos; |
| 40 | +}; |
| 41 | + |
| 42 | +export const setStageEventHandlers = ({ |
| 43 | + stage, |
| 44 | + $tool, |
| 45 | + $isDrawing, |
| 46 | + $lastMouseDownPos, |
| 47 | + $lastCursorPos, |
| 48 | + $lastAddedPoint, |
| 49 | + $brushSize, |
| 50 | + $brushSpacingPx, |
| 51 | + $selectedLayerId, |
| 52 | + $selectedLayerType, |
| 53 | + $shouldInvertBrushSizeScrollDirection, |
| 54 | + onRGLayerLineAdded, |
| 55 | + onRGLayerPointAddedToLine, |
| 56 | + onRGLayerRectAdded, |
| 57 | + onBrushSizeChanged, |
| 58 | +}: SetStageEventHandlersArg): (() => void) => { |
| 59 | + stage.on('mouseenter', (e) => { |
| 60 | + const stage = e.target.getStage(); |
| 61 | + if (!stage) { |
| 62 | + return; |
| 63 | + } |
| 64 | + const tool = $tool.get(); |
| 65 | + stage.findOne<Konva.Layer>(`#${TOOL_PREVIEW_LAYER_ID}`)?.visible(tool === 'brush' || tool === 'eraser'); |
| 66 | + }); |
| 67 | + |
| 68 | + stage.on('mousedown', (e) => { |
| 69 | + const stage = e.target.getStage(); |
| 70 | + if (!stage) { |
| 71 | + return; |
| 72 | + } |
| 73 | + const tool = $tool.get(); |
| 74 | + const pos = syncCursorPos(stage, $lastCursorPos); |
| 75 | + const selectedLayerId = $selectedLayerId.get(); |
| 76 | + const selectedLayerType = $selectedLayerType.get(); |
| 77 | + if (!pos || !selectedLayerId || selectedLayerType !== 'regional_guidance_layer') { |
| 78 | + return; |
| 79 | + } |
| 80 | + if (tool === 'brush' || tool === 'eraser') { |
| 81 | + onRGLayerLineAdded({ |
| 82 | + layerId: selectedLayerId, |
| 83 | + points: [pos.x, pos.y, pos.x, pos.y], |
| 84 | + tool, |
| 85 | + }); |
| 86 | + $isDrawing.set(true); |
| 87 | + $lastMouseDownPos.set(pos); |
| 88 | + } else if (tool === 'rect') { |
| 89 | + $lastMouseDownPos.set(snapPosToStage(pos, stage)); |
| 90 | + } |
| 91 | + }); |
| 92 | + |
| 93 | + stage.on('mouseup', (e) => { |
| 94 | + const stage = e.target.getStage(); |
| 95 | + if (!stage) { |
| 96 | + return; |
| 97 | + } |
| 98 | + const pos = $lastCursorPos.get(); |
| 99 | + const selectedLayerId = $selectedLayerId.get(); |
| 100 | + const selectedLayerType = $selectedLayerType.get(); |
| 101 | + |
| 102 | + if (!pos || !selectedLayerId || selectedLayerType !== 'regional_guidance_layer') { |
| 103 | + return; |
| 104 | + } |
| 105 | + const lastPos = $lastMouseDownPos.get(); |
| 106 | + const tool = $tool.get(); |
| 107 | + if (lastPos && selectedLayerId && tool === 'rect') { |
| 108 | + const snappedPos = snapPosToStage(pos, stage); |
| 109 | + onRGLayerRectAdded({ |
| 110 | + layerId: selectedLayerId, |
| 111 | + rect: { |
| 112 | + x: Math.min(snappedPos.x, lastPos.x), |
| 113 | + y: Math.min(snappedPos.y, lastPos.y), |
| 114 | + width: Math.abs(snappedPos.x - lastPos.x), |
| 115 | + height: Math.abs(snappedPos.y - lastPos.y), |
| 116 | + }, |
| 117 | + }); |
| 118 | + } |
| 119 | + $isDrawing.set(false); |
| 120 | + $lastMouseDownPos.set(null); |
| 121 | + }); |
| 122 | + |
| 123 | + stage.on('mousemove', (e) => { |
| 124 | + const stage = e.target.getStage(); |
| 125 | + if (!stage) { |
| 126 | + return; |
| 127 | + } |
| 128 | + const tool = $tool.get(); |
| 129 | + const pos = syncCursorPos(stage, $lastCursorPos); |
| 130 | + const selectedLayerId = $selectedLayerId.get(); |
| 131 | + const selectedLayerType = $selectedLayerType.get(); |
| 132 | + |
| 133 | + stage.findOne<Konva.Layer>(`#${TOOL_PREVIEW_LAYER_ID}`)?.visible(tool === 'brush' || tool === 'eraser'); |
| 134 | + |
| 135 | + if (!pos || !selectedLayerId || selectedLayerType !== 'regional_guidance_layer') { |
| 136 | + return; |
| 137 | + } |
| 138 | + if (getIsFocused(stage) && getIsMouseDown(e) && (tool === 'brush' || tool === 'eraser')) { |
| 139 | + if ($isDrawing.get()) { |
| 140 | + // Continue the last line |
| 141 | + const lastAddedPoint = $lastAddedPoint.get(); |
| 142 | + if (lastAddedPoint) { |
| 143 | + // Dispatching redux events impacts perf substantially - using brush spacing keeps dispatches to a reasonable number |
| 144 | + if (Math.hypot(lastAddedPoint.x - pos.x, lastAddedPoint.y - pos.y) < $brushSpacingPx.get()) { |
| 145 | + return; |
| 146 | + } |
| 147 | + } |
| 148 | + $lastAddedPoint.set({ x: pos.x, y: pos.y }); |
| 149 | + onRGLayerPointAddedToLine({ layerId: selectedLayerId, point: [pos.x, pos.y] }); |
| 150 | + } else { |
| 151 | + // Start a new line |
| 152 | + onRGLayerLineAdded({ layerId: selectedLayerId, points: [pos.x, pos.y, pos.x, pos.y], tool }); |
| 153 | + } |
| 154 | + $isDrawing.set(true); |
| 155 | + } |
| 156 | + }); |
| 157 | + |
| 158 | + stage.on('mouseleave', (e) => { |
| 159 | + const stage = e.target.getStage(); |
| 160 | + if (!stage) { |
| 161 | + return; |
| 162 | + } |
| 163 | + const pos = syncCursorPos(stage, $lastCursorPos); |
| 164 | + $isDrawing.set(false); |
| 165 | + $lastCursorPos.set(null); |
| 166 | + $lastMouseDownPos.set(null); |
| 167 | + const selectedLayerId = $selectedLayerId.get(); |
| 168 | + const selectedLayerType = $selectedLayerType.get(); |
| 169 | + const tool = $tool.get(); |
| 170 | + |
| 171 | + stage.findOne<Konva.Layer>(`#${TOOL_PREVIEW_LAYER_ID}`)?.visible(false); |
| 172 | + |
| 173 | + if (!pos || !selectedLayerId || selectedLayerType !== 'regional_guidance_layer') { |
| 174 | + return; |
| 175 | + } |
| 176 | + if (getIsFocused(stage) && getIsMouseDown(e) && (tool === 'brush' || tool === 'eraser')) { |
| 177 | + onRGLayerPointAddedToLine({ layerId: selectedLayerId, point: [pos.x, pos.y] }); |
| 178 | + } |
| 179 | + }); |
| 180 | + |
| 181 | + stage.on('wheel', (e) => { |
| 182 | + e.evt.preventDefault(); |
| 183 | + const selectedLayerType = $selectedLayerType.get(); |
| 184 | + const tool = $tool.get(); |
| 185 | + if (selectedLayerType !== 'regional_guidance_layer' || (tool !== 'brush' && tool !== 'eraser')) { |
| 186 | + return; |
| 187 | + } |
| 188 | + |
| 189 | + // Invert the delta if the property is set to true |
| 190 | + let delta = e.evt.deltaY; |
| 191 | + if ($shouldInvertBrushSizeScrollDirection.get()) { |
| 192 | + delta = -delta; |
| 193 | + } |
| 194 | + |
| 195 | + if (e.evt.ctrlKey || e.evt.metaKey) { |
| 196 | + onBrushSizeChanged(calculateNewBrushSize($brushSize.get(), delta)); |
| 197 | + } |
| 198 | + }); |
| 199 | + |
| 200 | + return () => stage.off('mousedown mouseup mousemove mouseenter mouseleave wheel'); |
| 201 | +}; |
0 commit comments