{"version":3,"file":"canvas.bundle.js","sources":["../src/components/canvas.js"],"sourcesContent":["import type { CanvasData } from '../types';\nimport '../style.css';\n\n// @vue/component\nexport const TransformCanvas = {\n\tname: 'transform-canvas',\n\n\tprops: {\n\t\tmodelValue: {\n\t\t\ttype: Object,\n\t\t\trequired: false,\n\t\t},\n\t\tzoomSensitivity: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0.01,\n\t\t},\n\t\tzoomSensitivityMouse: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0.04,\n\t\t},\n\t\tshowGrid: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: ['update:modelValue'],\n\n\tdata(): CanvasData\n\t{\n\t\treturn {\n\t\t\ttransform: {\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\tzoom: 1,\n\t\t\t},\n\t\t\tdragging: false,\n\t\t\tzooming: false,\n\t\t\tlastWheelEventTime: null,\n\t\t\tdragDirection: null,\n\t\t};\n\t},\n\n\tcomputed: {\n\t\tcanvasClass(): { [key: string]: boolean }\n\t\t{\n\t\t\treturn {\n\t\t\t\t'--dragging': this.dragging,\n\t\t\t\t'--zooming': this.zooming,\n\t\t\t};\n\t\t},\n\t\tcanvasStyles(): { [key: string]: string }\n\t\t{\n\t\t\tif (this.showGrid)\n\t\t\t{\n\t\t\t\tconst { x, y, zoom } = this.transform;\n\t\t\t\tconst size = Math.round(zoom * 100);\n\n\t\t\t\treturn {\n\t\t\t\t\t'background-image': `\n\t\t\t\t\t\tlinear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 100px),\n\t\t\t\t\t\tlinear-gradient(90deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 100px)\n\t\t\t\t\t`,\n\t\t\t\t\t'background-position': `${x}px ${y}px`,\n\t\t\t\t\t'background-size': `${size}px ${size}px`,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\treturn {};\n\t\t},\n\t\ttransformStyles(): { [key: string]: string }\n\t\t{\n\t\t\tthis.transform = this.modelValue ? {\n\t\t\t\t...this.modelValue,\n\t\t\t} : this.transform;\n\t\t\tconst { x, y, zoom } = this.transform;\n\n\t\t\treturn {\n\t\t\t\ttransform: `translate(${x}px, ${y}px) scale(${zoom})`,\n\t\t\t};\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonmousedown(event: MouseEvent): void\n\t\t{\n\t\t\tthis.dragOn = true;\n\t\t\tthis.dragDirection = null;\n\t\t},\n\n\t\tonmousemove(event: MouseEvent): void\n\t\t{\n\t\t\tif (!this.dragOn)\n\t\t\t{\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (event.buttons !== 1)\n\t\t\t{\n\t\t\t\tthis.dragOn = false;\n\t\t\t\tthis.dragging = false;\n\t\t\t\tthis.dragDirection = null;\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.dragging = true;\n\t\t\tif (!this.dragDirection)\n\t\t\t{\n\t\t\t\tif (Math.abs(event.movementX) > Math.abs(event.movementY))\n\t\t\t\t{\n\t\t\t\t\tthis.dragDirection = 'horizontal';\n\t\t\t\t}\n\t\t\t\telse\n\t\t\t\t{\n\t\t\t\t\tthis.dragDirection = 'vertical';\n\t\t\t\t}\n\t\t\t}\n\n\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\tthis.transform.x += event.movementX;\n\t\t\t\tthis.transform.y += event.movementY;\n\t\t\t\tthis.$emit('update:modelValue', this.transform);\n\t\t\t});\n\t\t},\n\n\t\tonmouseup(): void\n\t\t{\n\t\t\tthis.dragOn = false;\n\t\t\tthis.dragging = false;\n\t\t\tthis.dragDirection = null;\n\t\t},\n\n\t\toncontextmenu(event: MouseEvent): void\n\t\t{\n\t\t\tevent.preventDefault();\n\t\t},\n\n\t\tisTrackpad(event: WheelEvent): boolean\n\t\t{\n\t\t\treturn event.wheelDeltaY\n\t\t\t\t? event.wheelDeltaY === -3 * event.deltaY\n\t\t\t\t: event.deltaMode === 0;\n\t\t},\n\n\t\tonwheel(event: WheelEvent): void\n\t\t{\n\t\t\tconst isTrackpad = this.isTrackpad(event);\n\n\t\t\tif (event.ctrlKey)\n\t\t\t{\n\t\t\t\tconst zoomChange = isTrackpad\n\t\t\t\t\t? -event.deltaY * this.zoomSensitivity\n\t\t\t\t\t: -Math.sign(event.deltaY) * this.zoomSensitivityMouse\n\t\t\t\t;\n\n\t\t\t\tconst mouseX = event.clientX;\n\t\t\t\tconst mouseY = event.clientY;\n\n\t\t\t\tconst newZoom = Math.min(Math.max(0.2, this.transform.zoom + zoomChange), 3);\n\n\t\t\t\tconst oldCenterX = (mouseX - this.transform.x) / this.transform.zoom;\n\t\t\t\tconst oldCenterY = (mouseY - this.transform.y) / this.transform.zoom;\n\n\t\t\t\tthis.transform.zoom = newZoom;\n\t\t\t\tthis.transform.x = mouseX - oldCenterX * newZoom;\n\t\t\t\tthis.transform.y = mouseY - oldCenterY * newZoom;\n\n\t\t\t\tthis.zooming = true;\n\t\t\t\tthis.$emit('update:modelValue', this.transform);\n\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.zooming = false;\n\t\t\t\t}, 200);\n\t\t\t}\n\t\t\telse\n\t\t\t{\n\t\t\t\tconst dx = event.deltaX;\n\t\t\t\tconst dy = event.deltaY;\n\n\t\t\t\tif (event.shiftKey)\n\t\t\t\t{\n\t\t\t\t\tthis.transform.x -= dy;\n\t\t\t\t\tthis.transform.y -= dx;\n\t\t\t\t}\n\t\t\t\telse\n\t\t\t\t{\n\t\t\t\t\tthis.transform.x -= dx;\n\t\t\t\t\tthis.transform.y -= dy;\n\t\t\t\t}\n\t\t\t\tthis.$emit('update:modelValue', this.transform);\n\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t},\n\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"ui-transform-canvas\"\n\t\t\t:class=\"canvasClass\"\n\t\t\t:style=\"canvasStyles\"\n\t\t\t@mousedown=\"onmousedown\"\n\t\t\t@mousemove=\"onmousemove\"\n\t\t\t@mouseup=\"onmouseup\"\n\t\t\t@wheel=\"onwheel\"\n\t\t\t@contextmenu=\"oncontextmenu\"\n\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"ui-transform-canvas__transform\"\n\t\t\t\t:style=\"transformStyles\"\n\t\t\t>\n\t\t\t\t<slot :transform=\"transform\"/>\n\t\t\t</div>\n\t\t</div>\n\t`,\n};\n"],"names":["TransformCanvas","name","props","modelValue","type","Object","required","zoomSensitivity","Number","default","zoomSensitivityMouse","showGrid","Boolean","emits","data","transform","x","y","zoom","dragging","zooming","lastWheelEventTime","dragDirection","computed","canvasClass","canvasStyles","size","Math","round","transformStyles","methods","onmousedown","event","dragOn","onmousemove","buttons","abs","movementX","movementY","window","requestAnimationFrame","$emit","onmouseup","oncontextmenu","preventDefault","isTrackpad","wheelDeltaY","deltaY","deltaMode","onwheel","ctrlKey","zoomChange","sign","mouseX","clientX","mouseY","clientY","newZoom","min","max","oldCenterX","oldCenterY","setTimeout","dx","deltaX","dy","shiftKey","template"],"mappings":"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"}