this.BX=this.BX||{};(function(t){"use strict";const s={name:"transform-canvas",props:{modelValue:{type:Object,required:false},zoomSensitivity:{type:Number,default:.01},zoomSensitivityMouse:{type:Number,default:.04},showGrid:{type:Boolean,default:false}},emits:["update:modelValue"],data(){return{transform:{x:0,y:0,zoom:1},dragging:false,zooming:false,lastWheelEventTime:null,dragDirection:null}},computed:{canvasClass(){return{"--dragging":this.dragging,"--zooming":this.zooming}},canvasStyles(){if(this.showGrid){const{x:t,y:s,zoom:n}=this.transform;const e=Math.round(n*100);return{"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`,"background-position":`${t}px ${s}px`,"background-size":`${e}px ${e}px`}}return{}},transformStyles(){this.transform=this.modelValue?{...this.modelValue}:this.transform;const{x:t,y:s,zoom:n}=this.transform;return{transform:`translate(${t}px, ${s}px) scale(${n})`}}},methods:{onmousedown(t){this.dragOn=true;this.dragDirection=null},onmousemove(t){if(!this.dragOn){return}if(t.buttons!==1){this.dragOn=false;this.dragging=false;this.dragDirection=null;return}this.dragging=true;if(!this.dragDirection){if(Math.abs(t.movementX)>Math.abs(t.movementY)){this.dragDirection="horizontal"}else{this.dragDirection="vertical"}}window.requestAnimationFrame((()=>{this.transform.x+=t.movementX;this.transform.y+=t.movementY;this.$emit("update:modelValue",this.transform)}))},onmouseup(){this.dragOn=false;this.dragging=false;this.dragDirection=null},oncontextmenu(t){t.preventDefault()},isTrackpad(t){return t.wheelDeltaY?t.wheelDeltaY===-3*t.deltaY:t.deltaMode===0},onwheel(t){const s=this.isTrackpad(t);if(t.ctrlKey){const n=s?-t.deltaY*this.zoomSensitivity:-Math.sign(t.deltaY)*this.zoomSensitivityMouse;const e=t.clientX;const a=t.clientY;const o=Math.min(Math.max(.2,this.transform.zoom+n),3);const r=(e-this.transform.x)/this.transform.zoom;const i=(a-this.transform.y)/this.transform.zoom;this.transform.zoom=o;this.transform.x=e-r*o;this.transform.y=a-i*o;this.zooming=true;this.$emit("update:modelValue",this.transform);t.preventDefault();setTimeout((()=>{this.zooming=false}),200)}else{const s=t.deltaX;const n=t.deltaY;if(t.shiftKey){this.transform.x-=n;this.transform.y-=s}else{this.transform.x-=s;this.transform.y-=n}this.$emit("update:modelValue",this.transform);t.preventDefault()}}},template:`\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`};t.TransformCanvas=s})(this.BX.UI=this.BX.UI||{});
//# sourceMappingURL=canvas.bundle.map.js