|
@@ -275,13 +275,19 @@ export const dragListener = (
|
|
if (!move && !up && !down) return () => {};
|
|
if (!move && !up && !down) return () => {};
|
|
|
|
|
|
let moveHandler: any, endHandler: any;
|
|
let moveHandler: any, endHandler: any;
|
|
|
|
+ let button: number = -1
|
|
const downHandler = (ev: PointerEvent) => {
|
|
const downHandler = (ev: PointerEvent) => {
|
|
|
|
+ button = ev.button
|
|
const start = getOffset(ev, dom);
|
|
const start = getOffset(ev, dom);
|
|
let prev = start;
|
|
let prev = start;
|
|
down && down(start, ev);
|
|
down && down(start, ev);
|
|
props.notPrevent || ev.preventDefault();
|
|
props.notPrevent || ev.preventDefault();
|
|
|
|
|
|
moveHandler = (ev: PointerEvent) => {
|
|
moveHandler = (ev: PointerEvent) => {
|
|
|
|
+ if (ev.buttons <= 0) {
|
|
|
|
+ endHandler()
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
const end = getOffset(ev, dom);
|
|
const end = getOffset(ev, dom);
|
|
move!({ start, end, prev, ev });
|
|
move!({ start, end, prev, ev });
|
|
prev = end;
|
|
prev = end;
|
|
@@ -397,7 +403,7 @@ export const useViewer = installGlobalVar(() => {
|
|
|
|
|
|
const init = (dom: HTMLDivElement) => {
|
|
const init = (dom: HTMLDivElement) => {
|
|
const dragDestroy = dragListener(dom, {
|
|
const dragDestroy = dragListener(dom, {
|
|
- move: ({ end, prev }) => {
|
|
|
|
|
|
+ move: ({ end, prev, ev }) => {
|
|
if (cursor.value !== "move") {
|
|
if (cursor.value !== "move") {
|
|
viewer.movePixel({ x: end.x - prev.x, y: 0 });
|
|
viewer.movePixel({ x: end.x - prev.x, y: 0 });
|
|
}
|
|
}
|
|
@@ -532,6 +538,8 @@ export const useDrag = (
|
|
|
|
|
|
shape.draggable(true);
|
|
shape.draggable(true);
|
|
shape.dragBoundFunc(function (this: any, _: any, ev: MouseEvent) {
|
|
shape.dragBoundFunc(function (this: any, _: any, ev: MouseEvent) {
|
|
|
|
+ console.log(ev.buttons)
|
|
|
|
+ if (ev.buttons <= 0) return upHandler()
|
|
const current = invMat.value.point(getOffset(ev, stage.value!.getNode().container()));
|
|
const current = invMat.value.point(getOffset(ev, stage.value!.getNode().container()));
|
|
drag.value = {
|
|
drag.value = {
|
|
x: current.x - start.x,
|
|
x: current.x - start.x,
|
|
@@ -541,13 +549,15 @@ export const useDrag = (
|
|
start = current
|
|
start = current
|
|
return this.absolutePosition();
|
|
return this.absolutePosition();
|
|
});
|
|
});
|
|
|
|
+ const upHandler = () => {
|
|
|
|
+ pop && pop();
|
|
|
|
+ pop = null;
|
|
|
|
+ drag.value = undefined;
|
|
|
|
+ console.error('up')
|
|
|
|
+ }
|
|
|
|
|
|
return mergeFuns(
|
|
return mergeFuns(
|
|
- listener(document.documentElement, "pointerup", () => {
|
|
|
|
- pop && pop();
|
|
|
|
- pop = null;
|
|
|
|
- drag.value = undefined;
|
|
|
|
- }),
|
|
|
|
|
|
+ listener(document.documentElement, "pointerup", upHandler),
|
|
() => {
|
|
() => {
|
|
shape.off("pointerenter.drag pointerleave.drag pointerdown.drag");
|
|
shape.off("pointerenter.drag pointerleave.drag pointerdown.drag");
|
|
if (pop) {
|
|
if (pop) {
|