|
@@ -1,5 +1,10 @@
|
|
|
import { computed, h, nextTick, reactive, ref, watch, watchEffect } from "vue";
|
|
import { computed, h, nextTick, reactive, ref, watch, watchEffect } from "vue";
|
|
|
-import { installGlobalVar, useCursor, useRunHook, useStage } from "./use-global-vars";
|
|
|
|
|
|
|
+import {
|
|
|
|
|
+ installGlobalVar,
|
|
|
|
|
+ useCursor,
|
|
|
|
|
+ useRunHook,
|
|
|
|
|
+ useStage,
|
|
|
|
|
+} from "./use-global-vars";
|
|
|
import { useCan, useMode, useOperMode } from "./use-status";
|
|
import { useCan, useMode, useOperMode } from "./use-status";
|
|
|
import {
|
|
import {
|
|
|
Area,
|
|
Area,
|
|
@@ -32,9 +37,8 @@ import { useCurrentZIndex } from "./use-layer";
|
|
|
import { useViewerTransform } from "./use-viewer";
|
|
import { useViewerTransform } from "./use-viewer";
|
|
|
import { useMouseShapesStatus } from "./use-mouse-status";
|
|
import { useMouseShapesStatus } from "./use-mouse-status";
|
|
|
|
|
|
|
|
-type PayData<T extends ShapeType> = ComponentValue<T, "addMode"> extends "area"
|
|
|
|
|
- ? Area
|
|
|
|
|
- : Pos;
|
|
|
|
|
|
|
+type PayData<T extends ShapeType> =
|
|
|
|
|
+ ComponentValue<T, "addMode"> extends "area" ? Area : Pos;
|
|
|
|
|
|
|
|
export enum MessageAction {
|
|
export enum MessageAction {
|
|
|
add,
|
|
add,
|
|
@@ -47,7 +51,7 @@ export type AddMessage<T extends ShapeType> = {
|
|
|
consumed: PayData<T>[];
|
|
consumed: PayData<T>[];
|
|
|
cur?: PayData<T>;
|
|
cur?: PayData<T>;
|
|
|
ndx?: number;
|
|
ndx?: number;
|
|
|
- attach?: any
|
|
|
|
|
|
|
+ attach?: any;
|
|
|
action: MessageAction;
|
|
action: MessageAction;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
@@ -90,7 +94,7 @@ export const useInteractiveDrawShapeAPI = installGlobalVar(() => {
|
|
|
preset: Partial<DrawItem<T>> = {},
|
|
preset: Partial<DrawItem<T>> = {},
|
|
|
data?: PayData<T>,
|
|
data?: PayData<T>,
|
|
|
pixel = false,
|
|
pixel = false,
|
|
|
- force = false
|
|
|
|
|
|
|
+ force = false,
|
|
|
) => {
|
|
) => {
|
|
|
if (!force && !can.drawMode) {
|
|
if (!force && !can.drawMode) {
|
|
|
throw "当前状态不允许添加";
|
|
throw "当前状态不允许添加";
|
|
@@ -119,7 +123,7 @@ export const useInteractiveDrawShapeAPI = installGlobalVar(() => {
|
|
|
single = false,
|
|
single = false,
|
|
|
force = false,
|
|
force = false,
|
|
|
preSelectIds?: string[],
|
|
preSelectIds?: string[],
|
|
|
- callback?: () => void
|
|
|
|
|
|
|
+ callback?: () => void,
|
|
|
) => {
|
|
) => {
|
|
|
if (isEnter) {
|
|
if (isEnter) {
|
|
|
leave();
|
|
leave();
|
|
@@ -136,8 +140,8 @@ export const useInteractiveDrawShapeAPI = installGlobalVar(() => {
|
|
|
preset,
|
|
preset,
|
|
|
operate: { single, preSelectIds },
|
|
operate: { single, preSelectIds },
|
|
|
callback: () => {
|
|
callback: () => {
|
|
|
- leave()
|
|
|
|
|
- callback && callback()
|
|
|
|
|
|
|
+ leave();
|
|
|
|
|
+ callback && callback();
|
|
|
},
|
|
},
|
|
|
};
|
|
};
|
|
|
enter();
|
|
enter();
|
|
@@ -187,7 +191,7 @@ export const useDrawRunning = (shapeType?: ShapeType) => {
|
|
|
|
|
|
|
|
export const usePointBeforeHandler = (
|
|
export const usePointBeforeHandler = (
|
|
|
enableTransform = false,
|
|
enableTransform = false,
|
|
|
- enableSnap = false
|
|
|
|
|
|
|
+ enableSnap = false,
|
|
|
) => {
|
|
) => {
|
|
|
const operMode = useOperMode();
|
|
const operMode = useOperMode();
|
|
|
const conversionPosition = useConversionPosition(enableTransform);
|
|
const conversionPosition = useConversionPosition(enableTransform);
|
|
@@ -242,7 +246,7 @@ const useInteractiveDrawTemp = <T extends ShapeType>({
|
|
|
type: T;
|
|
type: T;
|
|
|
useIA: InteractiveHook;
|
|
useIA: InteractiveHook;
|
|
|
refSelf?: boolean;
|
|
refSelf?: boolean;
|
|
|
- addBefore?: (item: Area | Pos) => boolean,
|
|
|
|
|
|
|
+ addBefore?: (item: Area | Pos) => boolean;
|
|
|
enter?: () => void;
|
|
enter?: () => void;
|
|
|
quit?: () => void;
|
|
quit?: () => void;
|
|
|
getSnapGeo?: (data: DrawItem<T>) => SnapPoint[];
|
|
getSnapGeo?: (data: DrawItem<T>) => SnapPoint[];
|
|
@@ -257,7 +261,7 @@ const useInteractiveDrawTemp = <T extends ShapeType>({
|
|
|
const conversionPosition = useConversionPosition(true);
|
|
const conversionPosition = useConversionPosition(true);
|
|
|
const history = useHistory();
|
|
const history = useHistory();
|
|
|
const store = useStore();
|
|
const store = useStore();
|
|
|
- const runHook = useRunHook()
|
|
|
|
|
|
|
+ const runHook = useRunHook();
|
|
|
const processorIds = processors.register(() => DrawShape);
|
|
const processorIds = processors.register(() => DrawShape);
|
|
|
const clear = () => {
|
|
const clear = () => {
|
|
|
beforeHandler.clear();
|
|
beforeHandler.clear();
|
|
@@ -279,39 +283,59 @@ const useInteractiveDrawTemp = <T extends ShapeType>({
|
|
|
beforeHandler.clear();
|
|
beforeHandler.clear();
|
|
|
let geo: SnapPoint[] | undefined;
|
|
let geo: SnapPoint[] | undefined;
|
|
|
if (items.length && getSnapGeo) {
|
|
if (items.length && getSnapGeo) {
|
|
|
- const item = obj.interactiveFixData({
|
|
|
|
|
|
|
+ try {
|
|
|
|
|
+ const item = obj.interactiveFixData({
|
|
|
|
|
+ info: {
|
|
|
|
|
+ cur: conversionPosition(p),
|
|
|
|
|
+ consumed: ia.consumedMessage,
|
|
|
|
|
+ action: MessageAction.update,
|
|
|
|
|
+ },
|
|
|
|
|
+ data: copy(items[0]),
|
|
|
|
|
+ history,
|
|
|
|
|
+ viewTransform: viewTransform.value,
|
|
|
|
|
+ store,
|
|
|
|
|
+ } as any);
|
|
|
|
|
+ geo = getSnapGeo(item as any);
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.error("--->", e);
|
|
|
|
|
+ ia.isRunning.value = false;
|
|
|
|
|
+ throw e;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ return beforeHandler.transform(p, geo, !geo);
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const addItem = (cur: PayData<T>) => {
|
|
|
|
|
+ let item: any = runHook(() => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ return obj.interactiveToData({
|
|
|
info: {
|
|
info: {
|
|
|
- cur: conversionPosition(p),
|
|
|
|
|
|
|
+ cur,
|
|
|
consumed: ia.consumedMessage,
|
|
consumed: ia.consumedMessage,
|
|
|
- action: MessageAction.update,
|
|
|
|
|
|
|
+ action: MessageAction.add,
|
|
|
},
|
|
},
|
|
|
- data: copy(items[0]),
|
|
|
|
|
|
|
+ preset: ia.preset,
|
|
|
history,
|
|
history,
|
|
|
viewTransform: viewTransform.value,
|
|
viewTransform: viewTransform.value,
|
|
|
store,
|
|
store,
|
|
|
} as any);
|
|
} as any);
|
|
|
- geo = getSnapGeo(item as any);
|
|
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.error("无法添加", e);
|
|
|
|
|
+ quitDrawShape()
|
|
|
}
|
|
}
|
|
|
- return beforeHandler.transform(p, geo, !geo);
|
|
|
|
|
- },
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- const addItem = (cur: PayData<T>) => {
|
|
|
|
|
- let item: any = runHook(() => obj.interactiveToData({
|
|
|
|
|
- info: { cur, consumed: ia.consumedMessage, action: MessageAction.add },
|
|
|
|
|
- preset: ia.preset,
|
|
|
|
|
- history,
|
|
|
|
|
- viewTransform: viewTransform.value,
|
|
|
|
|
- store,
|
|
|
|
|
- } as any));
|
|
|
|
|
|
|
+ });
|
|
|
if (!item) return;
|
|
if (!item) return;
|
|
|
item = reactive(item);
|
|
item = reactive(item);
|
|
|
|
|
|
|
|
const storeAddItem = (cItem: any) => {
|
|
const storeAddItem = (cItem: any) => {
|
|
|
- if (addBefore && !addBefore(ia.consumedMessage[ia.consumedMessage.length - 1])) {
|
|
|
|
|
|
|
+ if (
|
|
|
|
|
+ addBefore &&
|
|
|
|
|
+ !addBefore(ia.consumedMessage[ia.consumedMessage.length - 1])
|
|
|
|
|
+ ) {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
- console.log(ia.consumedMessage)
|
|
|
|
|
|
|
+ console.log(ia.consumedMessage);
|
|
|
const items = store.getTypeItems(type);
|
|
const items = store.getTypeItems(type);
|
|
|
if (!obj.checkItemData || obj.checkItemData(cItem)) {
|
|
if (!obj.checkItemData || obj.checkItemData(cItem)) {
|
|
|
if (items.some((item) => item.id === cItem.id)) {
|
|
if (items.some((item) => item.id === cItem.id)) {
|
|
@@ -339,21 +363,27 @@ const useInteractiveDrawTemp = <T extends ShapeType>({
|
|
|
watch(
|
|
watch(
|
|
|
cur,
|
|
cur,
|
|
|
() => {
|
|
() => {
|
|
|
- const info = ia.attachInfos?.get(cur as any)
|
|
|
|
|
- obj.interactiveFixData({
|
|
|
|
|
- info: {
|
|
|
|
|
- cur,
|
|
|
|
|
- consumed: ia.consumedMessage,
|
|
|
|
|
- action: MessageAction.update,
|
|
|
|
|
- attach: info
|
|
|
|
|
- },
|
|
|
|
|
- data: item,
|
|
|
|
|
- history,
|
|
|
|
|
- viewTransform: viewTransform.value,
|
|
|
|
|
- store,
|
|
|
|
|
- } as any);
|
|
|
|
|
|
|
+ const info = ia.attachInfos?.get(cur as any);
|
|
|
|
|
+ try {
|
|
|
|
|
+ obj.interactiveFixData({
|
|
|
|
|
+ info: {
|
|
|
|
|
+ cur,
|
|
|
|
|
+ consumed: ia.consumedMessage,
|
|
|
|
|
+ action: MessageAction.update,
|
|
|
|
|
+ attach: info,
|
|
|
|
|
+ },
|
|
|
|
|
+ data: item,
|
|
|
|
|
+ history,
|
|
|
|
|
+ viewTransform: viewTransform.value,
|
|
|
|
|
+ store,
|
|
|
|
|
+ } as any);
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.error("无法添加", e);
|
|
|
|
|
+ quitDrawShape()
|
|
|
|
|
+ throw e;
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
- { deep: true }
|
|
|
|
|
|
|
+ { deep: true },
|
|
|
),
|
|
),
|
|
|
// 监听是否消费完毕
|
|
// 监听是否消费完毕
|
|
|
watch(ia.singleDone, () => {
|
|
watch(ia.singleDone, () => {
|
|
@@ -363,7 +393,7 @@ const useInteractiveDrawTemp = <T extends ShapeType>({
|
|
|
items.splice(ndx, 1);
|
|
items.splice(ndx, 1);
|
|
|
clear();
|
|
clear();
|
|
|
stop();
|
|
stop();
|
|
|
- })
|
|
|
|
|
|
|
+ }),
|
|
|
);
|
|
);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
@@ -374,7 +404,7 @@ const useInteractiveDrawTemp = <T extends ShapeType>({
|
|
|
datas.forEach(addItem);
|
|
datas.forEach(addItem);
|
|
|
ia.consume(datas);
|
|
ia.consume(datas);
|
|
|
},
|
|
},
|
|
|
- { immediate: true }
|
|
|
|
|
|
|
+ { immediate: true },
|
|
|
);
|
|
);
|
|
|
return items;
|
|
return items;
|
|
|
};
|
|
};
|
|
@@ -388,8 +418,8 @@ export const useInteractiveDrawAreas = <T extends ShapeType>(type: T) => {
|
|
|
useIA: useInteractiveAreas,
|
|
useIA: useInteractiveAreas,
|
|
|
refSelf: type === "arrow",
|
|
refSelf: type === "arrow",
|
|
|
addBefore: (data) => {
|
|
addBefore: (data) => {
|
|
|
- const positions = data as Area
|
|
|
|
|
- return lineLen(positions[0], positions[1]) > 1
|
|
|
|
|
|
|
+ const positions = data as Area;
|
|
|
|
|
+ return lineLen(positions[0], positions[1]) > 1;
|
|
|
},
|
|
},
|
|
|
enter() {
|
|
enter() {
|
|
|
cursorPop = cursor.push("./icons/m_draw.png");
|
|
cursorPop = cursor.push("./icons/m_draw.png");
|
|
@@ -421,7 +451,7 @@ export const useInteractiveDrawDots = <T extends ShapeType>(type: T) => {
|
|
|
export const penUpdatePoints = <T extends Pos>(
|
|
export const penUpdatePoints = <T extends Pos>(
|
|
|
transfromPoints: T[],
|
|
transfromPoints: T[],
|
|
|
cur: T,
|
|
cur: T,
|
|
|
- needClose = false
|
|
|
|
|
|
|
+ needClose = false,
|
|
|
) => {
|
|
) => {
|
|
|
const points = [...transfromPoints];
|
|
const points = [...transfromPoints];
|
|
|
let oper: "del" | "add" | "set" | "no" = "add";
|
|
let oper: "del" | "add" | "set" | "no" = "add";
|
|
@@ -485,7 +515,7 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
|
|
|
const history = useHistory();
|
|
const history = useHistory();
|
|
|
const processors = useStoreRenderProcessors();
|
|
const processors = useStoreRenderProcessors();
|
|
|
const store = useStore();
|
|
const store = useStore();
|
|
|
- const runHook = useRunHook()
|
|
|
|
|
|
|
+ const runHook = useRunHook();
|
|
|
const viewTransform = useViewerTransform();
|
|
const viewTransform = useViewerTransform();
|
|
|
const operMode = useOperMode();
|
|
const operMode = useOperMode();
|
|
|
const processorIds = processors.register(() => {
|
|
const processorIds = processors.register(() => {
|
|
@@ -528,14 +558,14 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
|
|
|
typeof ia.preset?.id === "string" &&
|
|
typeof ia.preset?.id === "string" &&
|
|
|
ia.preset?.id &&
|
|
ia.preset?.id &&
|
|
|
ia.preset.getMessages &&
|
|
ia.preset.getMessages &&
|
|
|
- store.getItemById(ia.preset.id)
|
|
|
|
|
|
|
+ store.getItemById(ia.preset.id),
|
|
|
);
|
|
);
|
|
|
const items = reactive([]) as DrawItem<T>[];
|
|
const items = reactive([]) as DrawItem<T>[];
|
|
|
const messages = useHistoryAttach<Pos[]>(
|
|
const messages = useHistoryAttach<Pos[]>(
|
|
|
`${type}-pen`,
|
|
`${type}-pen`,
|
|
|
isRuning,
|
|
isRuning,
|
|
|
shape.value ? (ia.preset!.getMessages! as any) : () => [],
|
|
shape.value ? (ia.preset!.getMessages! as any) : () => [],
|
|
|
- true
|
|
|
|
|
|
|
+ true,
|
|
|
);
|
|
);
|
|
|
let prev: SnapPoint;
|
|
let prev: SnapPoint;
|
|
|
let firstEntry = true;
|
|
let firstEntry = true;
|
|
@@ -595,13 +625,21 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
|
|
|
}
|
|
}
|
|
|
let item: any = items.length === 0 ? null : items[0];
|
|
let item: any = items.length === 0 ? null : items[0];
|
|
|
if (!item) {
|
|
if (!item) {
|
|
|
- item = runHook(() => obj.interactiveToData({
|
|
|
|
|
- preset: ia.preset as any,
|
|
|
|
|
- info: setMessage(dot),
|
|
|
|
|
- viewTransform: viewTransform.value,
|
|
|
|
|
- history,
|
|
|
|
|
- store,
|
|
|
|
|
- }));
|
|
|
|
|
|
|
+ item = runHook(() => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ return obj.interactiveToData({
|
|
|
|
|
+ preset: ia.preset as any,
|
|
|
|
|
+ info: setMessage(dot),
|
|
|
|
|
+ viewTransform: viewTransform.value,
|
|
|
|
|
+ history,
|
|
|
|
|
+ store,
|
|
|
|
|
+ });
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.error("无法添加", e);
|
|
|
|
|
+ quitDrawShape()
|
|
|
|
|
+ throw e;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
if (!item) return;
|
|
if (!item) return;
|
|
|
items[0] = item = reactive(item);
|
|
items[0] = item = reactive(item);
|
|
|
}
|
|
}
|
|
@@ -645,7 +683,7 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
|
|
|
update();
|
|
update();
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- { deep: true }
|
|
|
|
|
|
|
+ { deep: true },
|
|
|
),
|
|
),
|
|
|
// 监听是否消费完毕
|
|
// 监听是否消费完毕
|
|
|
watch(ia.singleDone, () => {
|
|
watch(ia.singleDone, () => {
|
|
@@ -666,7 +704,7 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
|
|
|
stopWatch && stopWatch();
|
|
stopWatch && stopWatch();
|
|
|
stopWatch = null;
|
|
stopWatch = null;
|
|
|
firstEntry = false;
|
|
firstEntry = false;
|
|
|
- })
|
|
|
|
|
|
|
+ }),
|
|
|
);
|
|
);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
@@ -677,7 +715,7 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
|
|
|
datas.forEach(addItem);
|
|
datas.forEach(addItem);
|
|
|
ia.consume(datas);
|
|
ia.consume(datas);
|
|
|
},
|
|
},
|
|
|
- { immediate: true }
|
|
|
|
|
|
|
+ { immediate: true },
|
|
|
);
|
|
);
|
|
|
return items;
|
|
return items;
|
|
|
};
|
|
};
|