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/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]);