fix(ui): do not allow drawing if layer disabled

This commit is contained in:
psychedelicious 2024-08-20 13:12:36 +10:00
parent 2e7ae6a07e
commit 8ffcf2a6be
2 changed files with 193 additions and 206 deletions

View File

@ -194,20 +194,24 @@ export class CanvasTool {
const tool = toolState.selected;
const isDrawable = selectedEntity && isDrawableEntity(selectedEntity.state);
const isDrawable = selectedEntity && selectedEntity.state.isEnabled && isDrawableEntity(selectedEntity.state);
// Update the stage's pointer style
if (tool === 'view') {
// View gets a hand
stage.container().style.cursor = isMouseDown ? 'grabbing' : 'grab';
} else if (renderedEntityCount === 0) {
// We have no layers, so we should not render any tool
if (Boolean(this.manager.stateApi.$transformingEntity.get()) || renderedEntityCount === 0) {
// We are transforming and/or have no layers, so we should not render any tool
stage.container().style.cursor = 'default';
} else if (!isDrawable) {
// Non-drawable layers don't have tools
stage.container().style.cursor = 'not-allowed';
} else if (tool === 'move' || Boolean(this.manager.stateApi.$transformingEntity.get())) {
// Move tool gets a pointer
} else if (tool === 'view') {
// view tool gets a hand
stage.container().style.cursor = isMouseDown ? 'grabbing' : 'grab';
// Bbox tool gets default
} else if (tool === 'bbox') {
stage.container().style.cursor = 'default';
} else if (tool === 'eyeDropper') {
// Eyedropper gets none
stage.container().style.cursor = 'none';
} else if (isDrawable) {
if (tool === 'move') {
// Move gets default arrow
stage.container().style.cursor = 'default';
} else if (tool === 'rect') {
// Rect gets a crosshair
@ -215,10 +219,11 @@ export class CanvasTool {
} else if (tool === 'brush' || tool === 'eraser') {
// Hide the native cursor and use the konva-rendered brush preview
stage.container().style.cursor = 'none';
} else if (tool === 'bbox') {
stage.container().style.cursor = 'default';
} else if (tool === 'eyeDropper') {
stage.container().style.cursor = 'none';
}
} else {
// isDrawable === 'false'
// Non-drawable layers don't have tools
stage.container().style.cursor = 'not-allowed';
}
stage.draggable(tool === 'view');

View File

@ -15,7 +15,6 @@ import type {
RgbaColor,
Tool,
} from 'features/controlLayers/store/types';
import { isDrawableEntity, isDrawableEntityAdapter } from 'features/controlLayers/store/types';
import type Konva from 'konva';
import type { KonvaEventObject } from 'konva/lib/Node';
import { clamp } from 'lodash-es';
@ -200,15 +199,10 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
if (color) {
manager.stateApi.setFill(color);
}
}
if (
pos &&
selectedEntity &&
isDrawableEntity(selectedEntity.state) &&
!$spaceKey.get() &&
getIsPrimaryMouseDown(e)
) {
manager.preview.tool.render();
} else {
const isDrawable = selectedEntity?.state.isEnabled;
if (pos && isDrawable && !$spaceKey.get() && getIsPrimaryMouseDown(e)) {
$lastMouseDownPos.set(pos);
const normalizedPoint = offsetCoord(pos, selectedEntity.state.position);
@ -299,7 +293,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
});
}
}
manager.preview.tool.render();
}
});
//#region mouseup
@ -307,8 +301,8 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
$isMouseDown.set(false);
const pos = $lastCursorPos.get();
const selectedEntity = getSelectedEntity();
if (pos && selectedEntity && isDrawableEntity(selectedEntity.state) && !$spaceKey.get()) {
const isDrawable = selectedEntity?.state.isEnabled;
if (pos && isDrawable && !$spaceKey.get()) {
const toolState = getToolState();
if (toolState.selected === 'brush') {
@ -340,7 +334,6 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
$lastMouseDownPos.set(null);
}
manager.preview.tool.render();
});
@ -353,17 +346,9 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
if (toolState.selected === 'eyeDropper') {
const color = getColorUnderCursor(stage);
manager.stateApi.$colorUnderCursor.set(color);
}
if (
pos &&
selectedEntity &&
isDrawableEntity(selectedEntity.state) &&
selectedEntity.adapter &&
isDrawableEntityAdapter(selectedEntity.adapter) &&
!$spaceKey.get() &&
getIsPrimaryMouseDown(e)
) {
} else {
const isDrawable = selectedEntity?.state.isEnabled;
if (pos && isDrawable && !$spaceKey.get() && getIsPrimaryMouseDown(e)) {
if (toolState.selected === 'brush') {
const drawingBuffer = selectedEntity.adapter.renderer.bufferState;
if (drawingBuffer) {
@ -451,6 +436,8 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
}
}
}
}
manager.preview.tool.render();
});
@ -461,14 +448,9 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
$lastMouseDownPos.set(null);
const selectedEntity = getSelectedEntity();
const toolState = getToolState();
const isDrawable = selectedEntity?.state.isEnabled;
if (
pos &&
selectedEntity &&
isDrawableEntity(selectedEntity.state) &&
!$spaceKey.get() &&
getIsPrimaryMouseDown(e)
) {
if (pos && isDrawable && !$spaceKey.get() && getIsPrimaryMouseDown(e)) {
const drawingBuffer = selectedEntity.adapter.renderer.bufferState;
const normalizedPoint = offsetCoord(pos, selectedEntity.state.position);
if (toolState.selected === 'brush' && drawingBuffer?.type === 'brush_line') {