|
|
@@ -1,4 +1,5 @@
|
|
|
import { ObjectDirective } from 'vue';
|
|
|
+import { throttle } from 'lodash-es';
|
|
|
|
|
|
export const bindMoveTool = (el: HTMLElement, binding) => {
|
|
|
const initScale = binding.value ? binding.value : 1;
|
|
|
@@ -34,18 +35,43 @@ export const bindMoveTool = (el: HTMLElement, binding) => {
|
|
|
transInfo.mouseInit = { x: mouseX, y: mouseY };
|
|
|
};
|
|
|
|
|
|
+ const scaleProcess = (e) => {
|
|
|
+ if (e.wheelDelta > 0) {
|
|
|
+ const newZoom = transInfo.zoom + 0.2;
|
|
|
+ if (newZoom <= 10) {
|
|
|
+ calcTransOrigin(e.clientX, e.clientY);
|
|
|
+ transInfo.zoom = newZoom;
|
|
|
+ }
|
|
|
+ } else if (e.wheelDelta < 0) {
|
|
|
+ const newZoom = transInfo.zoom - 0.2;
|
|
|
+ if (newZoom >= 0.2) {
|
|
|
+ calcTransOrigin(e.clientX, e.clientY);
|
|
|
+ transInfo.zoom = newZoom;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setBgStyle();
|
|
|
+ };
|
|
|
+
|
|
|
+ const throttleScale = throttle(scaleProcess, 200);
|
|
|
+
|
|
|
const handleScale = (e) => {
|
|
|
if (e.ctrlKey) {
|
|
|
e.preventDefault();
|
|
|
- calcTransOrigin(e.clientX, e.clientY);
|
|
|
- if (e.wheelDelta > 0) {
|
|
|
- const newZoom = transInfo.zoom + 0.2;
|
|
|
- transInfo.zoom = newZoom > 10 ? 10 : newZoom;
|
|
|
- } else if (e.wheelDelta < 0) {
|
|
|
- const newZoom = transInfo.zoom - 0.2;
|
|
|
- transInfo.zoom = newZoom < 0.2 ? 0.2 : newZoom;
|
|
|
- }
|
|
|
- setBgStyle();
|
|
|
+ throttleScale(e);
|
|
|
+ // if (e.wheelDelta > 0) {
|
|
|
+ // const newZoom = transInfo.zoom + 0.2;
|
|
|
+ // if (newZoom <= 10) {
|
|
|
+ // calcTransOrigin(e.clientX, e.clientY);
|
|
|
+ // transInfo.zoom = newZoom;
|
|
|
+ // }
|
|
|
+ // } else if (e.wheelDelta < 0) {
|
|
|
+ // const newZoom = transInfo.zoom - 0.2;
|
|
|
+ // if (newZoom >= 0.2) {
|
|
|
+ // calcTransOrigin(e.clientX, e.clientY);
|
|
|
+ // transInfo.zoom = newZoom;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // setBgStyle();
|
|
|
}
|
|
|
};
|
|
|
|