|
@@ -72,7 +72,7 @@ export const useGlobalVar = installGlobalVar(() => {
|
|
|
|
|
|
export const onlyId = () => uuid();
|
|
|
|
|
|
-export const stackVar = <T>(init?: T) => {
|
|
|
+export const stackVar = <T>(init?: T, test = false) => {
|
|
|
const factory = (init: T) => ({ var: init, id: onlyId() });
|
|
|
const stack = reactive([]) as { var: T; id: string }[];
|
|
|
if (init) {
|
|
@@ -86,6 +86,7 @@ export const stackVar = <T>(init?: T) => {
|
|
|
stack[stack.length - 1].var = val;
|
|
|
},
|
|
|
push(data: T) {
|
|
|
+ test && console.error('push', data)
|
|
|
stack.push(factory(data));
|
|
|
const item = stack[stack.length - 1];
|
|
|
const pop = (() => {
|
|
@@ -95,11 +96,13 @@ export const stackVar = <T>(init?: T) => {
|
|
|
}
|
|
|
}) as (() => void) & { set: (data: T) => void };
|
|
|
pop.set = (data) => {
|
|
|
+ test && console.error('pop', data)
|
|
|
item.var = data;
|
|
|
};
|
|
|
return pop;
|
|
|
},
|
|
|
pop() {
|
|
|
+ test && console.error('pop')
|
|
|
if (stack.length - 1 > 0) {
|
|
|
stack.pop();
|
|
|
} else {
|
|
@@ -117,7 +120,7 @@ export const stackVar = <T>(init?: T) => {
|
|
|
};
|
|
|
|
|
|
export const useCursor = installGlobalVar(
|
|
|
- () => stackVar("default"),
|
|
|
+ () => stackVar("default", false),
|
|
|
Symbol("cursor")
|
|
|
);
|
|
|
|
|
@@ -491,6 +494,7 @@ export const usePause = <T extends object>(api?: T): PausePack<T> => {
|
|
|
|
|
|
const hoverPointer = (shape: EntityShape, cursor: ReturnType<typeof useCursor>) => {
|
|
|
shape.on("pointerenter.hover", () => {
|
|
|
+ if (downing) return;
|
|
|
const pop = cursor.push("pointer");
|
|
|
shape.on("pointerleave.hover", () => {
|
|
|
pop();
|
|
@@ -502,6 +506,34 @@ const hoverPointer = (shape: EntityShape, cursor: ReturnType<typeof useCursor>)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+export const useClickHandler = (shape: Ref<DC<EntityShape> | undefined>, callback: () => void) => {
|
|
|
+ watchEffect((onCleanup) => {
|
|
|
+ if (!shape.value) return;
|
|
|
+
|
|
|
+ const $shape = shape.value.getNode()
|
|
|
+ let downPos:Pos | null
|
|
|
+ const downHandler = (ev: KonvaEventObject<any>) => {
|
|
|
+ downPos = getOffset(ev.evt)
|
|
|
+ $shape.on('pointerup.clickHandler', upHandler)
|
|
|
+
|
|
|
+ }
|
|
|
+ const upHandler = (ev: KonvaEventObject<any>) => {
|
|
|
+ const upPos = getOffset(ev.evt)
|
|
|
+ if (lineLen(downPos!, upPos) < 0.01) {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ $shape.off('pointerup.clickHandler', upHandler)
|
|
|
+ }
|
|
|
+ $shape.on('pointerdown.clickHandler', downHandler)
|
|
|
+
|
|
|
+ onCleanup(() => {
|
|
|
+ $shape.off('pointerdown.clickHandler', downHandler)
|
|
|
+ $shape.off('pointerup.clickHandler', upHandler)
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+let downing = false
|
|
|
export const useHoverPointer = (shape: Ref<DC<EntityShape> | undefined>) => {
|
|
|
const cursor = useCursor()
|
|
|
watchEffect((onCleanup) => {
|
|
@@ -523,6 +555,7 @@ export const useDrag = (
|
|
|
|
|
|
const init = (shape: EntityShape, dom: HTMLDivElement, ndx: number) => {
|
|
|
shape.on("pointerenter.drag", () => {
|
|
|
+ if (downing) return;
|
|
|
const pop = cursor.push("pointer");
|
|
|
shape.on("pointerleave.drag", () => {
|
|
|
pop();
|
|
@@ -533,11 +566,12 @@ export const useDrag = (
|
|
|
let pop: (() => void) | null = null;
|
|
|
let start = { x: 0, y: 0 }
|
|
|
shape.on("pointerdown.drag", (ev) => {
|
|
|
+ downing = true
|
|
|
pop = cursor.push("move")
|
|
|
start = invMat.value.point(getOffset(ev.evt, stage.value!.getNode().container()));
|
|
|
+ shape.draggable(true);
|
|
|
});
|
|
|
|
|
|
- shape.draggable(true);
|
|
|
shape.dragBoundFunc(function (this: any, _: any, ev: MouseEvent) {
|
|
|
if (ev.buttons <= 0) return upHandler()
|
|
|
const current = invMat.value.point(getOffset(ev, stage.value!.getNode().container()));
|
|
@@ -550,9 +584,11 @@ export const useDrag = (
|
|
|
return this.absolutePosition();
|
|
|
});
|
|
|
const upHandler = () => {
|
|
|
+ downing = false
|
|
|
pop && pop();
|
|
|
pop = null;
|
|
|
drag.value = undefined;
|
|
|
+ shape.draggable(false);
|
|
|
}
|
|
|
|
|
|
return mergeFuns(
|