External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve type errors in selection/crop/transform tools

Browse Source
This commit is contained in:
SnapOtter
2026-05-06 23:37:31 +08:00
parent 0f42ceca83
commit f0941e4aec
11 changed files with 65 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/common/canvas-resize-dialog.tsx
+2 -2
View File
@@ -30,9 +30,9 @@ export function CanvasResizeDialog({ open, onClose }: { open: boolean; onClose:
const [fill, setFill] = useState("#ffffff");
const handleApply = useCallback(() => {
resizeCanvas(width, height, anchor, fill);
resizeCanvas(width, height, anchor);
onClose();
}, [width, height, anchor, fill, resizeCanvas, onClose]);
}, [width, height, anchor, resizeCanvas, onClose]);
if (!open) return null;
apps/web/src/components/editor/common/context-menu.tsx
+8 -6
View File
@@ -73,7 +73,8 @@ export function ContextMenu({
const cutObjects = useEditorStore((s) => s.cutObjects);
const pasteObjects = useEditorStore((s) => s.pasteObjects);
const removeObjects = useEditorStore((s) => s.removeObjects);
const duplicateObjects = useEditorStore((s) => s.duplicateObjects);
const copyObjectsFn = useEditorStore((s) => s.copyObjects);
const pasteObjectsFn = useEditorStore((s) => s.pasteObjects);
const bringToFront = useEditorStore((s) => s.bringToFront);
const bringForward = useEditorStore((s) => s.bringForward);
const sendBackward = useEditorStore((s) => s.sendBackward);
@@ -106,7 +107,7 @@ export function ContextMenu({
icon: Scissors,
shortcut: "Ctrl+X",
action: () => {
cutObjects(selectedObjectIds);
cutObjects();
onClose();
},
},
@@ -115,7 +116,7 @@ export function ContextMenu({
icon: Copy,
shortcut: "Ctrl+C",
action: () => {
copyObjects(selectedObjectIds);
copyObjects();
onClose();
},
},
@@ -127,14 +128,15 @@ export function ContextMenu({
pasteObjects();
onClose();
},
disabled: clipboard.length === 0,
disabled: !clipboard || clipboard.length === 0,
},
{
label: "Duplicate",
icon: CopyPlus,
shortcut: "Ctrl+D",
action: () => {
duplicateObjects(selectedObjectIds);
copyObjectsFn();
pasteObjectsFn();
onClose();
},
dividerAfter: true,
@@ -192,7 +194,7 @@ export function ContextMenu({
pasteObjects();
onClose();
},
disabled: clipboard.length === 0,
disabled: !clipboard || clipboard.length === 0,
},
{
label: "Select All",
apps/web/src/components/editor/common/guide-lines.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ const GUIDE_WIDTH = 1;
export function GuideLines() {
const guides = useEditorStore((s) => s.guides);
const showGuides = useEditorStore((s) => s.showGuides);
const showGuides = useEditorStore((s) => s.guidesVisible);
const canvasSize = useEditorStore((s) => s.canvasSize);
const updateGuide = useEditorStore((s) => s.updateGuide);
const removeGuide = useEditorStore((s) => s.removeGuide);
apps/web/src/components/editor/common/image-resize-dialog.tsx
+2 -1
View File
@@ -2,7 +2,8 @@ import { Lock, Unlock, X } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { cn } from "@/lib/utils";
import { useEditorStore } from "@/stores/editor-store";
import type { ResampleMethod } from "@/types/editor";
type ResampleMethod = "nearest" | "bilinear" | "bicubic" | "lanczos";
// ---------------------------------------------------------------------------
// ImageResizeDialog -- modal with W/H, aspect lock, resampling method
apps/web/src/components/editor/common/rulers.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ export function HorizontalRuler() {
const zoom = useEditorStore((s) => s.zoom);
const panOffset = useEditorStore((s) => s.panOffset);
const canvasSize = useEditorStore((s) => s.canvasSize);
const showRulers = useEditorStore((s) => s.showRulers);
const showRulers = useEditorStore((s) => s.rulersVisible);
const addGuide = useEditorStore((s) => s.addGuide);
const draw = useCallback(() => {
@@ -146,7 +146,7 @@ export function VerticalRuler() {
const zoom = useEditorStore((s) => s.zoom);
const panOffset = useEditorStore((s) => s.panOffset);
const canvasSize = useEditorStore((s) => s.canvasSize);
const showRulers = useEditorStore((s) => s.showRulers);
const showRulers = useEditorStore((s) => s.rulersVisible);
const addGuide = useEditorStore((s) => s.addGuide);
const draw = useCallback(() => {
apps/web/src/components/editor/common/smart-guides.tsx
+6 -2
View File
@@ -1,6 +1,10 @@
import { Group, Line } from "react-konva";
import { useEditorStore } from "@/stores/editor-store";
import type { SmartGuide } from "@/types/editor";
export interface SmartGuide {
orientation: "horizontal" | "vertical";
position: number;
type: "edge" | "center" | "canvas";
}
// ---------------------------------------------------------------------------
// Smart guide calculation utilities (exported for testing)
@@ -156,7 +160,7 @@ export function snapToGuides(
// SmartGuidesOverlay -- renders temporary guide lines during drag
// ---------------------------------------------------------------------------
const GUIDE_COLORS = {
const GUIDE_COLORS: Record<SmartGuide["type"], string> = {
edge: "#f43f5e",
center: "#8b5cf6",
canvas: "#22c55e",
apps/web/src/components/editor/options/move-options.tsx
+6 -1
View File
@@ -65,7 +65,12 @@ export function MoveOptions() {
| "distribute-h"
| "distribute-v",
) => {
alignObjects(direction, selectedObjectIds, objects, updateObject);
alignObjects(
direction,
selectedObjectIds,
objects.map((o) => ({ id: o.id, attrs: o.attrs as unknown as Record<string, unknown> })),
updateObject,
);
};
return (
apps/web/src/components/editor/options/selection-options.tsx
+9 -10
View File
@@ -1,8 +1,11 @@
import { Circle, Minus, PenTool, Plus, Square, Wand2 } from "lucide-react";
import { useCallback } from "react";
import { useCallback, useState } from "react";
import { cn } from "@/lib/utils";
import { useEditorStore } from "@/stores/editor-store";
import type { SelectionMode, SelectionType, ToolType } from "@/types/editor";
import type { ToolType } from "@/types/editor";
type SelectionMode = "new" | "add" | "subtract";
type SelectionType = "rect" | "ellipse" | "lasso";
// ---------------------------------------------------------------------------
// SelectionOptions -- selection type toggle, mode buttons, feather input
@@ -42,8 +45,7 @@ function ToggleButton({
export function SelectionOptions() {
const activeTool = useEditorStore((s) => s.activeTool);
const setTool = useEditorStore((s) => s.setTool);
const selectionMode = useEditorStore((s) => s.selectionMode);
const setSelectionMode = useEditorStore((s) => s.setSelectionMode);
const [selectionMode, setSelectionMode] = useState<SelectionMode>("new");
const selectionType: SelectionType =
activeTool === "marquee-ellipse"
@@ -64,12 +66,9 @@ export function SelectionOptions() {
[setTool],
);
const handleModeChange = useCallback(
(mode: SelectionMode) => {
setSelectionMode(mode);
},
[setSelectionMode],
);
const handleModeChange = useCallback((mode: SelectionMode) => {
setSelectionMode(mode);
}, []);
const isMarquee = activeTool === "marquee-rect" || activeTool === "marquee-ellipse";
const isLasso = activeTool === "lasso-free" || activeTool === "lasso-poly";
apps/web/src/components/editor/tools/move-tool.tsx
+5 -4
View File
@@ -1,8 +1,8 @@
import type Konva from "konva";
import { useCallback, useEffect, useRef } from "react";
import { Transformer } from "react-konva";
import type { SmartGuide } from "@/components/editor/common/smart-guides";
import { useEditorStore } from "@/stores/editor-store";
import type { SmartGuide } from "@/types/editor";
// ---------------------------------------------------------------------------
// Smart guide calculation
@@ -258,7 +258,7 @@ export function useMoveTool(): MoveToolApi {
const setSelectedObjects = useEditorStore((s) => s.setSelectedObjects);
const updateObject = useEditorStore((s) => s.updateObject);
const canvasSize = useEditorStore((s) => s.canvasSize);
const snapToGuides = useEditorStore((s) => s.snapToGuides);
const snapToGuides = useEditorStore((s) => s.snappingEnabled);
// Attach transformer to selected nodes
useEffect(() => {
@@ -379,9 +379,10 @@ export function useMoveTool(): MoveToolApi {
for (const id of selectedObjectIds) {
const obj = useEditorStore.getState().objects.find((o) => o.id === id);
if (!obj) continue;
const attrs = obj.attrs as unknown as Record<string, unknown>;
updateObject(id, {
x: ((obj.attrs.x as number) ?? 0) + dx,
y: ((obj.attrs.y as number) ?? 0) + dy,
x: ((attrs.x as number) ?? 0) + dx,
y: ((attrs.y as number) ?? 0) + dy,
});
}
},
apps/web/src/components/editor/tools/selection-tool.tsx
+6 -2
View File
@@ -2,7 +2,10 @@ import type Konva from "konva";
import { useCallback, useEffect, useRef, useState } from "react";
import { Ellipse, Group, Line, Rect } from "react-konva";
import { useEditorStore } from "@/stores/editor-store";
import type { SelectionMode, SelectionState, SelectionType } from "@/types/editor";
import type { SelectionState } from "@/types/editor";
type SelectionMode = "new" | "add" | "subtract";
type SelectionType = "rect" | "ellipse" | "lasso";
// ---------------------------------------------------------------------------
// Marching ants animation
@@ -237,8 +240,9 @@ export function useSelectionTool(): SelectionToolApi {
const [currentPoints, setCurrentPoints] = useState<number[]>([]);
const startRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
const [selectionMode] = useState<SelectionMode>("new");
const setSelection = useEditorStore((s) => s.setSelection);
const selectionMode = useEditorStore((s) => s.selectionMode);
const canvasSize = useEditorStore((s) => s.canvasSize);
const existingSelection = useEditorStore((s) => s.selection);
apps/web/src/components/editor/tools/transform-tool.tsx
+18 -14
View File
@@ -56,12 +56,13 @@ export function useTransformTool(): TransformToolApi {
if (!isTransforming || selectedObjectIds.length === 0) return;
const obj = objects.find((o) => o.id === selectedObjectIds[0]);
if (!obj) return;
const a = obj.attrs as unknown as Record<string, unknown>;
const v: TransformValues = {
x: (obj.attrs.x as number) ?? 0,
y: (obj.attrs.y as number) ?? 0,
width: (obj.attrs.width as number) ?? 0,
height: (obj.attrs.height as number) ?? 0,
rotation: (obj.attrs.rotation as number) ?? 0,
x: (a.x as number) ?? 0,
y: (a.y as number) ?? 0,
width: (a.width as number) ?? 0,
height: (a.height as number) ?? 0,
rotation: (a.rotation as number) ?? 0,
};
setValuesState(v);
}, [isTransforming, selectedObjectIds, objects]);
@@ -86,12 +87,13 @@ export function useTransformTool(): TransformToolApi {
// Store pre-transform state for cancel
const obj = objects.find((o) => o.id === selectedObjectIds[0]);
if (obj) {
const a = obj.attrs as unknown as Record<string, unknown>;
preTransformRef.current = {
x: (obj.attrs.x as number) ?? 0,
y: (obj.attrs.y as number) ?? 0,
width: (obj.attrs.width as number) ?? 0,
height: (obj.attrs.height as number) ?? 0,
rotation: (obj.attrs.rotation as number) ?? 0,
x: (a.x as number) ?? 0,
y: (a.y as number) ?? 0,
width: (a.width as number) ?? 0,
height: (a.height as number) ?? 0,
rotation: (a.rotation as number) ?? 0,
};
}
}, [selectedObjectIds, objects]);
@@ -157,8 +159,9 @@ export function useTransformTool(): TransformToolApi {
for (const id of selectedObjectIds) {
const obj = objects.find((o) => o.id === id);
if (!obj) continue;
const currentScale = (obj.attrs.scaleX as number) ?? 1;
updateObject(id, { scaleX: -currentScale });
const a = obj.attrs as unknown as Record<string, unknown>;
const currentScale = (a.scaleX as number) ?? 1;
updateObject(id, { scaleX: -currentScale } as Record<string, unknown>);
}
}, [selectedObjectIds, objects, updateObject]);
@@ -166,8 +169,9 @@ export function useTransformTool(): TransformToolApi {
for (const id of selectedObjectIds) {
const obj = objects.find((o) => o.id === id);
if (!obj) continue;
const currentScale = (obj.attrs.scaleY as number) ?? 1;
updateObject(id, { scaleY: -currentScale });
const a = obj.attrs as unknown as Record<string, unknown>;
const currentScale = (a.scaleY as number) ?? 1;
updateObject(id, { scaleY: -currentScale } as Record<string, unknown>);
}
}, [selectedObjectIds, objects, updateObject]);