107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
|
import type { EditorService } from './editor.service';
|
|||
|
|
import { useViewState } from './useViewState';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 工具栏逻辑封装（不侵入 EditorService）
|
|||
|
|
* - 网格开关/设置
|
|||
|
|
* - 标尺开关/设置
|
|||
|
|
* - 适配视图：基于当前点集中心，用 jumpToPosition 实现跳转
|
|||
|
|
*/
|
|||
|
|
export function useToolbar() {
|
|||
|
|
const { getCurrentViewState, jumpToPosition } = useViewState();
|
|||
|
|
|
|||
|
|
// 标尺设置/开关（操作 editor.store.options / editor.store.data 并重绘）
|
|||
|
|
const setRule = (editor: EditorService, options: { rule: boolean; ruleColor?: string }) => {
|
|||
|
|
const { rule, ruleColor } = options;
|
|||
|
|
const o = editor.store.options as unknown as { rule?: boolean; ruleColor?: string };
|
|||
|
|
const d = editor.store.data as unknown as { rule?: boolean; ruleColor?: string };
|
|||
|
|
o.rule = rule;
|
|||
|
|
d.rule = rule;
|
|||
|
|
if (ruleColor) {
|
|||
|
|
o.ruleColor = ruleColor;
|
|||
|
|
d.ruleColor = ruleColor;
|
|||
|
|
}
|
|||
|
|
(editor.store as unknown as { patchFlagsTop?: boolean }).patchFlagsTop = true;
|
|||
|
|
editor.render();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const toggleRule = (editor: EditorService, color?: string) => {
|
|||
|
|
const cur = (editor.store.data as unknown as { rule?: boolean }).rule ?? false;
|
|||
|
|
setRule(editor, { rule: !cur, ruleColor: color });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 网格设置/开关
|
|||
|
|
const setGrid = (
|
|||
|
|
editor: EditorService,
|
|||
|
|
options: { grid: boolean; gridColor?: string; gridSize?: number; gridRotate?: number },
|
|||
|
|
) => {
|
|||
|
|
const { grid, gridColor, gridSize, gridRotate } = options;
|
|||
|
|
const o = editor.store.options as unknown as {
|
|||
|
|
grid?: boolean;
|
|||
|
|
gridColor?: string;
|
|||
|
|
gridSize?: number;
|
|||
|
|
gridRotate?: number;
|
|||
|
|
};
|
|||
|
|
const d = editor.store.data as unknown as {
|
|||
|
|
grid?: boolean;
|
|||
|
|
gridColor?: string;
|
|||
|
|
gridSize?: number;
|
|||
|
|
gridRotate?: number;
|
|||
|
|
};
|
|||
|
|
o.grid = grid;
|
|||
|
|
d.grid = grid;
|
|||
|
|
if (gridColor != null) {
|
|||
|
|
o.gridColor = gridColor;
|
|||
|
|
d.gridColor = gridColor;
|
|||
|
|
}
|
|||
|
|
if (gridSize != null) {
|
|||
|
|
o.gridSize = gridSize;
|
|||
|
|
d.gridSize = gridSize;
|
|||
|
|
}
|
|||
|
|
if (gridRotate != null) {
|
|||
|
|
o.gridRotate = gridRotate;
|
|||
|
|
d.gridRotate = gridRotate;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type CanvasWithTemplate = { canvasTemplate?: { bgPatchFlags?: boolean } };
|
|||
|
|
const canvas = editor.canvas as unknown as CanvasWithTemplate | undefined;
|
|||
|
|
if (canvas?.canvasTemplate) {
|
|||
|
|
canvas.canvasTemplate.bgPatchFlags = true;
|
|||
|
|
}
|
|||
|
|
editor.render();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const toggleGrid = (editor: EditorService) => {
|
|||
|
|
const cur = (editor.store.data as unknown as { grid?: boolean }).grid ?? false;
|
|||
|
|
setGrid(editor, { grid: !cur });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 适配视图：计算当前中心点，然后用 jumpToPosition 跳转（并保持现有策略：若首次/非恢复则缩放到 8%）
|
|||
|
|
const fitView = async (editor: EditorService) => {
|
|||
|
|
const state = getCurrentViewState(editor);
|
|||
|
|
await jumpToPosition(editor, state.centerX, state.centerY, false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 基础缩放
|
|||
|
|
const zoomIn = (editor: EditorService, step = 0.01) => {
|
|||
|
|
const s = editor.data().scale || 1;
|
|||
|
|
editor.scale(s + step);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const zoomOut = (editor: EditorService, step = 0.01) => {
|
|||
|
|
const s = editor.data().scale || 1;
|
|||
|
|
const next = Math.max(0.05, s - step);
|
|||
|
|
editor.scale(next);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
setRule,
|
|||
|
|
toggleRule,
|
|||
|
|
setGrid,
|
|||
|
|
toggleGrid,
|
|||
|
|
fitView,
|
|||
|
|
zoomIn,
|
|||
|
|
zoomOut,
|
|||
|
|
};
|
|||
|
|
}
|