canvas-drawing-editor 1.0.1 → 2.0.0

package/dist/canvas-drawing-editor.umd.js

@@ -0,0 +1,450 @@
+(function(u,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(u=typeof globalThis<"u"?globalThis:u||self,f(u.CanvasDrawingEditor={}))})(this,(function(u){"use strict";const f={title:"Canvas Editor",showPencil:!0,showRectangle:!0,showCircle:!0,showText:!0,showImage:!0,showZoom:!0,showDownload:!0,showExport:!0,showImport:!0,showColor:!0,showMinimap:!0};class m extends HTMLElement{constructor(){super(),this.config={...f},this.objects=[],this.selectedId=null,this.tool="SELECT",this.color="#000000",this.lineWidth=3,this.isDragging=!1,this.dragStart=null,this.currentObject=null,this.dragOffset={x:0,y:0},this.isTextInputVisible=!1,this.textInputPos={x:0,y:0},this.textInputScreenPos={x:0,y:0},this.editingTextId=null,this.isResizing=!1,this.resizeHandle=null,this.resizeStartBounds=null,this.resizeOriginalObject=null,this.history=[],this.clipboard=null,this.scale=1,this.panOffset={x:0,y:0},this.isPanning=!1,this.panStart={x:0,y:0},this.shadow=this.attachShadow({mode:"open"}),this.boundHandleResize=this.handleResize.bind(this),this.boundHandleKeyDown=this.handleKeyDown.bind(this),this.boundHandleWheel=this.handleWheel.bind(this)}static get observedAttributes(){return["title","show-pencil","show-rectangle","show-circle","show-text","show-image","show-zoom","show-download","show-export","show-import","show-color","show-minimap"]}connectedCallback(){this.parseAttributes(),this.render(),this.setupEventListeners(),this.initCanvas()}disconnectedCallback(){this.removeEventListeners()}attributeChangedCallback(t,i,s){i!==s&&(this.parseAttributes(),this.container&&this.updateUI())}parseAttributes(){this.config={title:this.getAttribute("title")||f.title,showPencil:this.getAttribute("show-pencil")!=="false",showRectangle:this.getAttribute("show-rectangle")!=="false",showCircle:this.getAttribute("show-circle")!=="false",showText:this.getAttribute("show-text")!=="false",showImage:this.getAttribute("show-image")!=="false",showZoom:this.getAttribute("show-zoom")!=="false",showDownload:this.getAttribute("show-download")!=="false",showExport:this.getAttribute("show-export")!=="false",showImport:this.getAttribute("show-import")!=="false",showColor:this.getAttribute("show-color")!=="false",showMinimap:this.getAttribute("show-minimap")!=="false"}}generateId(){return Math.random().toString(36).substr(2,9)}setupEventListeners(){window.addEventListener("resize",this.boundHandleResize),window.addEventListener("keydown",this.boundHandleKeyDown)}removeEventListeners(){window.removeEventListener("resize",this.boundHandleResize),window.removeEventListener("keydown",this.boundHandleKeyDown),this.canvas&&this.canvas.removeEventListener("wheel",this.boundHandleWheel)}handleResize(){this.initCanvas()}initCanvas(){!this.canvasContainer||!this.canvas||requestAnimationFrame(()=>{this.canvas.width=this.canvasContainer.clientWidth,this.canvas.height=this.canvasContainer.clientHeight,this.renderCanvas(),this.renderMinimap()})}getMousePos(t){const i=this.canvas.getBoundingClientRect();let s,e;if("touches"in t&&t.touches.length>0)s=t.touches[0].clientX,e=t.touches[0].clientY;else if("clientX"in t)s=t.clientX,e=t.clientY;else return{x:0,y:0};const n=(s-i.left-this.panOffset.x)/this.scale,a=(e-i.top-this.panOffset.y)/this.scale;return{x:n,y:a}}getScreenPos(t){const i=this.canvas.getBoundingClientRect();let s,e;if("touches"in t&&t.touches.length>0)s=t.touches[0].clientX,e=t.touches[0].clientY;else if("clientX"in t)s=t.clientX,e=t.clientY;else return{x:0,y:0};return{x:s-i.left,y:e-i.top}}getObjectBounds(t){switch(t.type){case"RECTANGLE":case"IMAGE":{const i=t;return{x:i.x,y:i.y,width:i.width,height:i.height}}case"CIRCLE":{const i=t;return{x:i.x-i.radius,y:i.y-i.radius,width:i.radius*2,height:i.radius*2}}case"TEXT":{const i=t,s=i.text.length*i.fontSize*.6;return{x:i.x,y:i.y-i.fontSize,width:s,height:i.fontSize}}case"PATH":{const i=t;if(i.points.length===0)return{x:0,y:0,width:0,height:0};const s=Math.min(...i.points.map(o=>o.x)),e=Math.max(...i.points.map(o=>o.x)),n=Math.min(...i.points.map(o=>o.y)),a=Math.max(...i.points.map(o=>o.y));return{x:s,y:n,width:e-s,height:a-n}}}return{x:0,y:0,width:0,height:0}}getResizeHandleAtPoint(t,i,s){const e=this.getObjectBounds(t),n=8,a=[{name:"nw",x:e.x,y:e.y},{name:"ne",x:e.x+e.width,y:e.y},{name:"sw",x:e.x,y:e.y+e.height},{name:"se",x:e.x+e.width,y:e.y+e.height}];for(const o of a)if(Math.abs(i-o.x)<=n&&Math.abs(s-o.y)<=n)return o.name;return null}isHit(t,i,s){switch(t.type){case"RECTANGLE":{const e=t;return i>=e.x&&i<=e.x+e.width&&s>=e.y&&s<=e.y+e.height}case"CIRCLE":{const e=t;return Math.sqrt(Math.pow(i-e.x,2)+Math.pow(s-e.y,2))<=e.radius}case"IMAGE":{const e=t;return i>=e.x&&i<=e.x+e.width&&s>=e.y&&s<=e.y+e.height}case"TEXT":{const e=t;return i>=e.x&&i<=e.x+e.text.length*e.fontSize*.6&&s>=e.y-e.fontSize&&s<=e.y}case"PATH":{const e=t;if(e.points.length===0)return!1;const n=Math.min(...e.points.map(r=>r.x)),a=Math.max(...e.points.map(r=>r.x)),o=Math.min(...e.points.map(r=>r.y)),l=Math.max(...e.points.map(r=>r.y));return i>=n&&i<=a&&s>=o&&s<=l}}return!1}saveHistory(){this.history.push(JSON.parse(JSON.stringify(this.objects)))}undo(){if(this.history.length===0)return;const t=this.history.pop();t&&(this.objects=t,this.selectedId=null,this.renderCanvas(),this.renderMinimap(),this.dispatchChangeEvent())}deleteSelected(){this.selectedId&&(this.saveHistory(),this.objects=this.objects.filter(t=>t.id!==this.selectedId),this.selectedId=null,this.renderCanvas(),this.renderMinimap(),this.updateUI(),this.dispatchChangeEvent())}copySelected(){if(this.selectedId){const t=this.objects.find(i=>i.id===this.selectedId);t&&(this.clipboard=JSON.parse(JSON.stringify(t)))}}pasteObject(){if(this.clipboard){this.saveHistory();const t={...JSON.parse(JSON.stringify(this.clipboard)),id:this.generateId(),x:this.clipboard.x+20,y:this.clipboard.y+20};t.type==="PATH"&&t.points&&(t.points=t.points.map(i=>({x:i.x+20,y:i.y+20}))),this.objects.push(t),this.selectedId=t.id,this.clipboard=t,this.renderCanvas(),this.renderMinimap(),this.updateUI(),this.dispatchChangeEvent()}}dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("editor-change",{bubbles:!0,composed:!0,detail:{objects:this.objects}}))}handleKeyDown(t){if(!this.isTextInputVisible){if((t.ctrlKey||t.metaKey)&&t.key==="z"){t.preventDefault(),this.undo();return}if((t.ctrlKey||t.metaKey)&&t.key==="c"){this.selectedId&&(t.preventDefault(),this.copySelected());return}if((t.ctrlKey||t.metaKey)&&t.key==="v"){this.clipboard&&(t.preventDefault(),this.pasteObject());return}if((t.key==="Delete"||t.key==="Backspace")&&this.selectedId){t.preventDefault(),this.deleteSelected();return}if(!t.ctrlKey&&!t.metaKey)switch(t.key.toLowerCase()){case"v":this.setTool("SELECT");break;case"p":case"b":this.setTool("PENCIL");break;case"r":this.setTool("RECTANGLE");break;case"o":this.setTool("CIRCLE");break;case"t":this.setTool("TEXT");break;case"escape":this.selectedId=null,this.hideTextInput(),this.renderCanvas(),this.updateUI();break}}}handleWheel(t){t.preventDefault();const i=this.canvas.getBoundingClientRect(),s=t.clientX-i.left,e=t.clientY-i.top,n=t.deltaY>0?.9:1.1,a=this.scale*n;this.zoomAtPoint(a,s,e)}zoomAtPoint(t,i,s){const e=Math.min(Math.max(t,.2),5),n=(i-this.panOffset.x)/this.scale,a=(s-this.panOffset.y)/this.scale,o=i-n*e,l=s-a*e;this.scale=e,this.panOffset={x:o,y:l},this.renderCanvas(),this.renderMinimap(),this.updateZoomDisplay()}zoomIn(){const t=this.canvas.width/2,i=this.canvas.height/2;this.zoomAtPoint(this.scale*1.2,t,i)}zoomOut(){const t=this.canvas.width/2,i=this.canvas.height/2;this.zoomAtPoint(this.scale/1.2,t,i)}resetZoom(){this.scale=1,this.panOffset={x:0,y:0},this.renderCanvas(),this.renderMinimap(),this.updateZoomDisplay()}updateZoomDisplay(){const t=this.shadow.querySelector(".zoom-text");t&&(t.textContent=`${Math.round(this.scale*100)}%`)}setTool(t){this.tool=t,this.updateToolButtons()}updateToolButtons(){this.shadow.querySelectorAll(".tool-btn").forEach(i=>{i.getAttribute("data-tool")===this.tool?i.classList.add("active"):i.classList.remove("active")})}hideTextInput(){this.isTextInputVisible=!1,this.textInputContainer&&(this.textInputContainer.style.display="none"),this.editingTextId=null}showTextInput(t,i,s=""){this.isTextInputVisible=!0,this.textInputScreenPos={x:t,y:i},this.textInputContainer&&this.textInput&&(this.textInputContainer.style.display="block",this.textInputContainer.style.left=`${t}px`,this.textInputContainer.style.top=`${i-30}px`,this.textInput.value=s,this.textInput.style.color=this.color,setTimeout(()=>{this.textInput.focus(),s&&this.textInput.select()},0))}submitText(){var i,s;const t=(s=(i=this.textInput)==null?void 0:i.value)==null?void 0:s.trim();if(t){if(this.editingTextId){const e=this.objects.find(n=>n.id===this.editingTextId);e&&e.text!==t&&(this.saveHistory(),e.text=t),this.selectedId=this.editingTextId}else{this.saveHistory();const e={id:this.generateId(),type:"TEXT",x:this.textInputPos.x,y:this.textInputPos.y,text:t,fontSize:24,color:this.color,lineWidth:this.lineWidth};this.objects.push(e),this.selectedId=e.id}this.dispatchChangeEvent()}this.hideTextInput(),this.setTool("SELECT"),this.renderCanvas(),this.renderMinimap(),this.updateUI()}handleCanvasPointerDown(t){const{x:i,y:s}=this.getMousePos(t),e=this.getScreenPos(t);if(this.dragStart={x:i,y:s},this.isDragging=!0,this.isTextInputVisible&&this.tool!=="TEXT"&&this.submitText(),this.tool==="SELECT"){if(this.selectedId){const a=this.objects.find(o=>o.id===this.selectedId);if(a){const o=this.getResizeHandleAtPoint(a,i,s);if(o){this.saveHistory(),this.isResizing=!0,this.resizeHandle=o,this.resizeStartBounds=this.getObjectBounds(a),this.resizeOriginalObject=JSON.parse(JSON.stringify(a));return}}}const n=[...this.objects].reverse().find(a=>this.isHit(a,i,s));n?(this.selectedId=n.id,this.dragOffset={x:i-n.x,y:s-n.y},this.saveHistory(),this.updateUI()):(this.selectedId=null,this.isPanning=!0,this.panStart=e,this.updateUI())}else if(this.tool==="TEXT")this.textInputPos={x:i,y:s},this.showTextInput(e.x,e.y),this.isDragging=!1;else{this.saveHistory();const n=this.generateId();this.tool==="RECTANGLE"?this.currentObject={id:n,type:"RECTANGLE",x:i,y:s,width:0,height:0,color:this.color,lineWidth:this.lineWidth}:this.tool==="CIRCLE"?this.currentObject={id:n,type:"CIRCLE",x:i,y:s,radius:0,color:this.color,lineWidth:this.lineWidth}:this.tool==="PENCIL"&&(this.currentObject={id:n,type:"PATH",x:i,y:s,points:[{x:i,y:s}],color:this.color,lineWidth:this.lineWidth})}this.renderCanvas()}handleCanvasPointerMove(t){if(this.isPanning){const e=this.getScreenPos(t),n=e.x-this.panStart.x,a=e.y-this.panStart.y;this.panOffset={x:this.panOffset.x+n,y:this.panOffset.y+a},this.panStart=e,this.renderCanvas(),this.renderMinimap();return}if(!this.isDragging||!this.dragStart)return;const{x:i,y:s}=this.getMousePos(t);if(this.isResizing&&this.selectedId&&this.resizeHandle&&this.resizeStartBounds&&this.resizeOriginalObject){const e=this.objects.find(d=>d.id===this.selectedId);if(!e)return;const n=i-this.dragStart.x,a=s-this.dragStart.y;let o=this.resizeStartBounds.x,l=this.resizeStartBounds.y,r=this.resizeStartBounds.width,h=this.resizeStartBounds.height;switch(this.resizeHandle.includes("e")&&(r=this.resizeStartBounds.width+n),this.resizeHandle.includes("w")&&(o=this.resizeStartBounds.x+n,r=this.resizeStartBounds.width-n),this.resizeHandle.includes("s")&&(h=this.resizeStartBounds.height+a),this.resizeHandle.includes("n")&&(l=this.resizeStartBounds.y+a,h=this.resizeStartBounds.height-a),r=Math.max(10,r),h=Math.max(10,h),e.type){case"RECTANGLE":case"IMAGE":e.x=o,e.y=l,e.width=r,e.height=h;break;case"CIRCLE":{const d=Math.max(r,h)/2;e.x=o+d,e.y=l+d,e.radius=d;break}case"TEXT":{const d=this.resizeOriginalObject,c=r/this.resizeStartBounds.width;e.x=o,e.y=l+h,e.fontSize=Math.max(8,Math.round(d.fontSize*c));break}case"PATH":{const d=this.resizeOriginalObject,c=r/this.resizeStartBounds.width,p=h/this.resizeStartBounds.height;e.points=d.points.map(g=>({x:o+(g.x-this.resizeStartBounds.x)*c,y:l+(g.y-this.resizeStartBounds.y)*p}));break}}this.renderCanvas(),this.renderMinimap();return}if(this.tool==="SELECT"&&this.selectedId){const e=this.objects.find(n=>n.id===this.selectedId);if(e){if(e.type==="PATH"){const n=e,a=i-this.dragStart.x,o=s-this.dragStart.y;n.points=n.points.map(l=>({x:l.x+a,y:l.y+o})),this.dragStart={x:i,y:s}}else e.x=i-this.dragOffset.x,e.y=s-this.dragOffset.y;this.renderCanvas(),this.renderMinimap()}}else if(this.currentObject){if(this.currentObject.type==="RECTANGLE")this.currentObject.width=i-this.currentObject.x,this.currentObject.height=s-this.currentObject.y;else if(this.currentObject.type==="CIRCLE"){const e=Math.sqrt(Math.pow(i-this.currentObject.x,2)+Math.pow(s-this.currentObject.y,2));this.currentObject.radius=e}else this.currentObject.type==="PATH"&&this.currentObject.points.push({x:i,y:s});this.renderCanvas()}}handleCanvasPointerUp(){this.isDragging=!1,this.dragStart=null,this.isResizing=!1,this.resizeHandle=null,this.resizeStartBounds=null,this.resizeOriginalObject=null,this.isPanning=!1,this.currentObject&&(this.objects.push(this.currentObject),this.currentObject=null,this.dispatchChangeEvent()),this.renderCanvas(),this.renderMinimap()}handleCanvasDoubleClick(t){t.preventDefault();const{x:i,y:s}=this.getMousePos(t),e=[...this.objects].reverse().find(n=>this.isHit(n,i,s));if(e&&e.type==="TEXT"){const n=e;this.editingTextId=n.id,this.textInputPos={x:n.x,y:n.y};const a=n.x*this.scale+this.panOffset.x,o=n.y*this.scale+this.panOffset.y;this.showTextInput(a,o,n.text),this.setTool("SELECT")}}renderCanvas(){if(this.ctx){if(this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.fillStyle="#ffffff",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height),this.ctx.save(),this.ctx.translate(this.panOffset.x,this.panOffset.y),this.ctx.scale(this.scale,this.scale),this.objects.forEach(t=>this.drawObject(this.ctx,t,!1)),this.currentObject&&this.drawObject(this.ctx,this.currentObject,!1),this.selectedId&&this.tool==="SELECT"){const t=this.objects.find(i=>i.id===this.selectedId);t&&this.drawSelectionHandles(this.ctx,t)}this.ctx.restore()}}drawObject(t,i,s){switch(t.beginPath(),t.strokeStyle=i.color,t.lineWidth=i.lineWidth,t.fillStyle=i.color,!s&&i.id===this.selectedId?(t.shadowColor="rgba(0, 100, 255, 0.5)",t.shadowBlur=10):t.shadowBlur=0,i.type){case"RECTANGLE":{const e=i;t.strokeRect(e.x,e.y,e.width,e.height);break}case"CIRCLE":{const e=i;t.beginPath(),t.arc(e.x,e.y,e.radius,0,2*Math.PI),t.stroke();break}case"PATH":{const e=i;if(e.points.length<2)break;t.beginPath(),t.lineCap="round",t.lineJoin="round",t.moveTo(e.points[0].x,e.points[0].y);for(let n=1;n<e.points.length;n++)t.lineTo(e.points[n].x,e.points[n].y);t.stroke();break}case"TEXT":{const e=i;t.font=`${e.fontSize}px sans-serif`,t.fillText(e.text,e.x,e.y);break}case"IMAGE":{const e=i;if(e.imageElement&&e.imageElement.complete)t.drawImage(e.imageElement,e.x,e.y,e.width,e.height);else if(e.dataUrl){const n=new Image;n.onload=()=>{e.imageElement=n,this.renderCanvas()},n.src=e.dataUrl}break}}}drawSelectionHandles(t,i){const s=this.getObjectBounds(i),e=8;t.shadowBlur=0,t.fillStyle="#3b82f6",t.strokeStyle="#ffffff",t.lineWidth=2,[{x:s.x,y:s.y},{x:s.x+s.width,y:s.y},{x:s.x,y:s.y+s.height},{x:s.x+s.width,y:s.y+s.height}].forEach(a=>{t.beginPath(),t.rect(a.x-e/2,a.y-e/2,e,e),t.fill(),t.stroke()}),t.strokeStyle="#3b82f6",t.lineWidth=1,t.setLineDash([5,5]),t.strokeRect(s.x,s.y,s.width,s.height),t.setLineDash([])}renderMinimap(){if(!this.minimapCtx||!this.config.showMinimap)return;const t=this.minimapCanvas,i=this.canvas;this.minimapCtx.clearRect(0,0,t.width,t.height);const s=t.width/i.width,e=t.height/i.height,n=Math.min(s,e)*.92,a=i.width*n,o=i.height*n,l=(t.width-a)/2,r=(t.height-o)/2;this.minimapCtx.fillStyle="#ffffff",this.minimapCtx.fillRect(l,r,a,o),this.minimapCtx.save(),this.minimapCtx.translate(l,r),this.minimapCtx.scale(n,n),this.minimapCtx.translate(this.panOffset.x,this.panOffset.y),this.minimapCtx.scale(this.scale,this.scale),(this.currentObject?[...this.objects,this.currentObject]:this.objects).forEach(d=>{switch(this.minimapCtx.fillStyle=d.color,this.minimapCtx.strokeStyle=d.color,this.minimapCtx.lineWidth=d.lineWidth,this.minimapCtx.setLineDash([]),d.type){case"RECTANGLE":{const c=d;this.minimapCtx.fillRect(c.x,c.y,c.width,c.height);break}case"CIRCLE":{const c=d;this.minimapCtx.beginPath(),this.minimapCtx.arc(c.x,c.y,c.radius,0,Math.PI*2),this.minimapCtx.fill();break}case"PATH":{const c=d;c.points.length>0&&(this.minimapCtx.beginPath(),this.minimapCtx.lineCap="round",this.minimapCtx.lineJoin="round",this.minimapCtx.moveTo(c.points[0].x,c.points[0].y),c.points.forEach(p=>this.minimapCtx.lineTo(p.x,p.y)),this.minimapCtx.stroke());break}case"TEXT":{const c=d;this.minimapCtx.font=`${c.fontSize}px sans-serif`,this.minimapCtx.fillText(c.text,c.x,c.y);break}case"IMAGE":{const c=d;c.imageElement&&this.minimapCtx.drawImage(c.imageElement,c.x,c.y,c.width,c.height);break}}}),this.minimapCtx.restore(),this.minimapCtx.strokeStyle="#94a3b8",this.minimapCtx.lineWidth=1,this.minimapCtx.strokeRect(l,r,a,o)}handleMinimapClick(t){const i=this.minimapCanvas.getBoundingClientRect(),s=t.clientX-i.left,e=t.clientY-i.top,n=this.minimapCanvas.width/this.canvas.width,a=this.minimapCanvas.height/this.canvas.height,o=Math.min(n,a)*.92,l=this.canvas.width*o,r=this.canvas.height*o,h=(this.minimapCanvas.width-l)/2,d=(this.minimapCanvas.height-r)/2,c=s-h,p=e-d,g=(c/o-this.panOffset.x)/this.scale,x=(p/o-this.panOffset.y)/this.scale,b=this.canvas.width/2,v=this.canvas.height/2;this.panOffset={x:b/this.scale-g,y:v/this.scale-x},this.renderCanvas(),this.renderMinimap()}handleImageUpload(t){const i=t.target;if(!i.files||i.files.length===0)return;const s=i.files[0],e=new FileReader;e.onload=n=>{var l;const a=(l=n.target)==null?void 0:l.result,o=new Image;o.onload=()=>{this.saveHistory();const r=300;let h=o.width,d=o.height;if(h>r||d>r){const p=Math.min(r/h,r/d);h*=p,d*=p}const c={id:this.generateId(),type:"IMAGE",x:100,y:100,width:h,height:d,color:"#000000",lineWidth:1,dataUrl:a,imageElement:o};this.objects.push(c),this.selectedId=c.id,this.setTool("SELECT"),this.renderCanvas(),this.renderMinimap(),this.updateUI(),this.dispatchChangeEvent()},o.src=a},e.readAsDataURL(s),i.value=""}saveJson(){const t={version:"1.0",objects:this.objects.map(a=>{const{imageElement:o,...l}=a;return l})},i=JSON.stringify(t,null,2),s=new Blob([i],{type:"application/json"}),e=URL.createObjectURL(s),n=document.createElement("a");n.href=e,n.download="canvas-project.json",n.click(),URL.revokeObjectURL(e)}loadJson(t){const i=t.target;if(!i.files||i.files.length===0)return;const s=i.files[0],e=new FileReader;e.onload=n=>{var a;try{const o=JSON.parse((a=n.target)==null?void 0:a.result);o.objects&&Array.isArray(o.objects)&&(this.saveHistory(),this.objects=o.objects,this.selectedId=null,this.objects.forEach(l=>{if(l.type==="IMAGE"&&l.dataUrl){const r=new Image;r.onload=()=>{l.imageElement=r,this.renderCanvas(),this.renderMinimap()},r.src=l.dataUrl}}),this.renderCanvas(),this.renderMinimap(),this.updateUI(),this.dispatchChangeEvent())}catch(o){console.error("Failed to load JSON:",o)}},e.readAsText(s),i.value=""}exportPng(){const t=document.createElement("canvas");t.width=this.canvas.width,t.height=this.canvas.height;const i=t.getContext("2d");i.fillStyle="#ffffff",i.fillRect(0,0,t.width,t.height),i.translate(this.panOffset.x,this.panOffset.y),i.scale(this.scale,this.scale),this.objects.forEach(n=>this.drawObject(i,n,!0));const s=t.toDataURL("image/png"),e=document.createElement("a");e.href=s,e.download="canvas-export.png",e.click()}updateUI(){const t=this.shadow.querySelector(".selection-info");if(t)if(this.selectedId){const s=this.objects.find(e=>e.id===this.selectedId);if(s){const n={RECTANGLE:"矩形",CIRCLE:"圆形",PATH:"画笔",TEXT:"文本",IMAGE:"图片"}[s.type]||s.type;t.innerHTML=`
+            <span class="selection-label">已选择: ${n}</span>
+            <button class="delete-btn" title="删除">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+              </svg>
+            </button>
+          `,t.classList.add("visible");const a=t.querySelector(".delete-btn");a&&a.addEventListener("click",()=>this.deleteSelected())}}else t.classList.remove("visible"),t.innerHTML="";const i=this.shadow.querySelector(".undo-btn");i&&(i.disabled=this.history.length===0)}render(){this.shadow.innerHTML=`
+      <style>${this.getStyles()}</style>
+      <div class="editor-container">
+        <!-- 左侧工具栏 -->
+        <div class="toolbar">
+          ${this.config.showPencil?this.createToolButton("PENCIL","pencil-icon","画笔 (P)"):""}
+          ${this.config.showRectangle?this.createToolButton("RECTANGLE","rect-icon","矩形 (R)"):""}
+          ${this.config.showCircle?this.createToolButton("CIRCLE","circle-icon","圆形 (O)"):""}
+          ${this.config.showText?this.createToolButton("TEXT","text-icon","文本 (T)"):""}
+          ${this.config.showImage?`
+            <label class="tool-btn" title="插入图片">
+              <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="3" width="18" height="18" rx="2"/>
+                <circle cx="8.5" cy="8.5" r="1.5"/>
+                <path d="M21 15l-5-5L5 21"/>
+              </svg>
+              <input type="file" accept="image/*" class="hidden image-input" />
+            </label>
+          `:""}
+          <div class="divider"></div>
+          <button class="tool-btn undo-btn" title="撤销 (Ctrl+Z)" disabled>
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M3 7v6h6M3 13a9 9 0 1 0 2.5-6.5L3 7"/>
+            </svg>
+          </button>
+          <div class="spacer"></div>
+          ${this.config.showColor?`
+            <input type="color" class="color-picker" value="${this.color}" title="颜色" />
+          `:""}
+        </div>
+
+        <!-- 主区域 -->
+        <div class="main-area">
+          <!-- 顶部栏 -->
+          <div class="top-bar">
+            <div class="top-bar-left">
+              <h2 class="title">${this.config.title}</h2>
+              <div class="selection-info"></div>
+            </div>
+            <div class="top-bar-right">
+              ${this.config.showZoom?`
+                <div class="zoom-controls">
+                  <button class="zoom-btn zoom-out-btn" title="缩小">
+                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35M8 11h6"/>
+                    </svg>
+                  </button>
+                  <button class="zoom-text" title="重置缩放">100%</button>
+                  <button class="zoom-btn zoom-in-btn" title="放大">
+                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35M11 8v6M8 11h6"/>
+                    </svg>
+                  </button>
+                </div>
+              `:""}
+              ${this.config.showExport||this.config.showImport||this.config.showDownload?`
+                <div class="file-controls">
+                  ${this.config.showExport?`
+                    <button class="file-btn save-json-btn" title="保存项目 (JSON)">
+                      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>
+                      </svg>
+                    </button>
+                  `:""}
+                  ${this.config.showImport?`
+                    <label class="file-btn" title="加载项目 (JSON)">
+                      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
+                      </svg>
+                      <input type="file" accept=".json" class="hidden load-json-input" />
+                    </label>
+                  `:""}
+                  ${this.config.showDownload?`
+                    <button class="file-btn export-png-btn" title="导出 PNG">
+                      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+                      </svg>
+                    </button>
+                  `:""}
+                </div>
+              `:""}
+            </div>
+          </div>
+
+          <!-- 画布容器 -->
+          <div class="canvas-container">
+            <canvas class="main-canvas"></canvas>
+
+            ${this.config.showMinimap?`
+              <div class="minimap-wrapper">
+                <div class="minimap-header">
+                  <svg class="minimap-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="3" width="18" height="18" rx="2"/>
+                    <path d="M3 9h18M9 21V9"/>
+                  </svg>
+                  <span>导航</span>
+                </div>
+                <canvas class="minimap-canvas" width="220" height="140"></canvas>
+              </div>
+            `:""}
+
+            <!-- 文本输入 -->
+            <div class="text-input-container" style="display: none;">
+              <input type="text" class="text-input" placeholder="输入文本..." />
+            </div>
+
+            <!-- 空画布提示 -->
+            <div class="empty-hint">
+              <h3>开始创作</h3>
+              <p>选择左侧的工具开始绘制</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,this.container=this.shadow.querySelector(".editor-container"),this.toolbar=this.shadow.querySelector(".toolbar"),this.topBar=this.shadow.querySelector(".top-bar"),this.canvasContainer=this.shadow.querySelector(".canvas-container"),this.canvas=this.shadow.querySelector(".main-canvas"),this.ctx=this.canvas.getContext("2d"),this.config.showMinimap&&(this.minimapCanvas=this.shadow.querySelector(".minimap-canvas"),this.minimapCtx=this.minimapCanvas.getContext("2d")),this.textInputContainer=this.shadow.querySelector(".text-input-container"),this.textInput=this.shadow.querySelector(".text-input"),this.bindEvents()}bindEvents(){this.canvas.addEventListener("mousedown",h=>this.handleCanvasPointerDown(h)),this.canvas.addEventListener("mousemove",h=>this.handleCanvasPointerMove(h)),this.canvas.addEventListener("mouseup",()=>this.handleCanvasPointerUp()),this.canvas.addEventListener("mouseleave",()=>this.handleCanvasPointerUp()),this.canvas.addEventListener("dblclick",h=>this.handleCanvasDoubleClick(h)),this.canvas.addEventListener("touchstart",h=>this.handleCanvasPointerDown(h)),this.canvas.addEventListener("touchmove",h=>this.handleCanvasPointerMove(h)),this.canvas.addEventListener("touchend",()=>this.handleCanvasPointerUp()),this.canvas.addEventListener("wheel",this.boundHandleWheel,{passive:!1}),this.shadow.querySelectorAll(".tool-btn[data-tool]").forEach(h=>{h.addEventListener("click",()=>{const d=h.getAttribute("data-tool");this.setTool(d)})});const t=this.shadow.querySelector(".undo-btn");t&&t.addEventListener("click",()=>this.undo());const i=this.shadow.querySelector(".color-picker");i&&i.addEventListener("input",h=>{this.color=h.target.value});const s=this.shadow.querySelector(".image-input");s&&s.addEventListener("change",h=>this.handleImageUpload(h));const e=this.shadow.querySelector(".zoom-in-btn"),n=this.shadow.querySelector(".zoom-out-btn"),a=this.shadow.querySelector(".zoom-text");e&&e.addEventListener("click",()=>this.zoomIn()),n&&n.addEventListener("click",()=>this.zoomOut()),a&&a.addEventListener("click",()=>this.resetZoom());const o=this.shadow.querySelector(".save-json-btn"),l=this.shadow.querySelector(".load-json-input"),r=this.shadow.querySelector(".export-png-btn");o&&o.addEventListener("click",()=>this.saveJson()),l&&l.addEventListener("change",h=>this.loadJson(h)),r&&r.addEventListener("click",()=>this.exportPng()),this.minimapCanvas&&this.minimapCanvas.addEventListener("click",h=>this.handleMinimapClick(h)),this.textInput&&(this.textInput.addEventListener("keydown",h=>{h.key==="Enter"?(h.preventDefault(),this.submitText()):h.key==="Escape"&&this.hideTextInput()}),this.textInput.addEventListener("blur",()=>{this.isTextInputVisible&&this.submitText()}))}createToolButton(t,i,s){const e={"pencil-icon":'<path d="M17 3a2.85 2.85 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>',"rect-icon":'<rect x="3" y="3" width="18" height="18" rx="2"/>',"circle-icon":'<circle cx="12" cy="12" r="10"/>',"text-icon":'<path d="M4 7V4h16v3M9 20h6M12 4v16"/>'};return`
+      <button class="tool-btn ${this.tool===t?"active":""}" data-tool="${t}" title="${s}">
+        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          ${e[i]}
+        </svg>
+      </button>
+    `}getStyles(){return`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      }
+
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      .hidden {
+        display: none !important;
+      }
+
+      .editor-container {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        background: #f1f5f9;
+      }
+
+      /* 工具栏 */
+      .toolbar {
+        width: 64px;
+        background: #ffffff;
+        border-right: 1px solid #e2e8f0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 12px 8px;
+        gap: 4px;
+      }
+
+      .tool-btn {
+        width: 44px;
+        height: 44px;
+        border: none;
+        background: transparent;
+        border-radius: 12px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #64748b;
+        transition: all 0.2s;
+      }
+
+      .tool-btn:hover {
+        background: #f1f5f9;
+        color: #4f46e5;
+      }
+
+      .tool-btn.active {
+        background: #4f46e5;
+        color: #ffffff;
+        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+        transform: scale(1.05);
+      }
+
+      .tool-btn:disabled {
+        color: #cbd5e1;
+        cursor: not-allowed;
+      }
+
+      .tool-btn:disabled:hover {
+        background: transparent;
+        color: #cbd5e1;
+      }
+
+      .icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      .divider {
+        width: 32px;
+        height: 1px;
+        background: #e2e8f0;
+        margin: 8px 0;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+
+      .color-picker {
+        width: 32px;
+        height: 32px;
+        border: 2px solid #e2e8f0;
+        border-radius: 50%;
+        cursor: pointer;
+        padding: 0;
+        overflow: hidden;
+        -webkit-appearance: none;
+      }
+
+      .color-picker::-webkit-color-swatch-wrapper {
+        padding: 0;
+      }
+
+      .color-picker::-webkit-color-swatch {
+        border: none;
+        border-radius: 50%;
+      }
+
+      /* 主区域 */
+      .main-area {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      /* 顶部栏 */
+      .top-bar {
+        height: 56px;
+        background: #ffffff;
+        border-bottom: 1px solid #e2e8f0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      }
+
+      .top-bar-left, .top-bar-right {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #334155;
+      }
+
+      .selection-info {
+        display: none;
+        align-items: center;
+        gap: 8px;
+        background: #eef2ff;
+        padding: 4px 12px;
+        border-radius: 20px;
+        border: 1px solid #c7d2fe;
+      }
+
+      .selection-info.visible {
+        display: flex;
+      }
+
+      .selection-label {
+        font-size: 12px;
+        font-weight: 600;
+        color: #4f46e5;
+        text-transform: uppercase;
+      }
+
+      .delete-btn {
+        background: none;
+        border: none;
+        color: #ef4444;
+        cursor: pointer;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .delete-btn:hover {
+        color: #dc2626;
+      }
+
+      .zoom-controls, .file-controls {
+        display: flex;
+        align-items: center;
+        background: #f1f5f9;
+        border-radius: 8px;
+        padding: 4px;
+      }
+
+      .zoom-btn, .file-btn {
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: transparent;
+        border-radius: 6px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #475569;
+        transition: all 0.2s;
+      }
+
+      .zoom-btn:hover, .file-btn:hover {
+        color: #4f46e5;
+      }
+
+      .zoom-text {
+        padding: 4px 8px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #475569;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        min-width: 50px;
+        text-align: center;
+      }
+
+      .zoom-text:hover {
+        color: #4f46e5;
+      }
+
+      /* 画布容器 */
+      .canvas-container {
+        flex: 1;
+        position: relative;
+        background: #f1f5f9;
+        overflow: hidden;
+      }
+
+      .main-canvas {
+        position: absolute;
+        inset: 0;
+        display: block;
+        cursor: crosshair;
+        touch-action: none;
+      }
+
+      /* 小地图 */
+      .minimap-wrapper {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        z-index: 30;
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 2px;
+      }
+
+      .minimap-wrapper > * {
+        background: #ffffff;
+      }
+
+      .minimap-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 12px;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        border-bottom: 1px solid #e2e8f0;
+        font-size: 12px;
+        font-weight: 600;
+        color: #475569;
+        border-radius: 10px 10px 0 0;
+      }
+
+      .minimap-icon {
+        width: 12px;
+        height: 12px;
+        color: #4f46e5;
+      }
+
+      .minimap-canvas {
+        cursor: pointer;
+        background: #f8fafc;
+        border-radius: 0 0 10px 10px;
+        display: block;
+      }
+
+      .minimap-canvas:hover {
+        filter: brightness(1.05);
+      }
+
+      /* 文本输入 */
+      .text-input-container {
+        position: absolute;
+        z-index: 20;
+      }
+
+      .text-input {
+        padding: 8px 12px;
+        border: 2px solid #4f46e5;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        outline: none;
+        min-width: 200px;
+        font-size: 16px;
+      }
+
+      /* 空画布提示 */
+      .empty-hint {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        opacity: 0.4;
+      }
+
+      .empty-hint h3 {
+        font-size: 24px;
+        font-weight: 700;
+        color: #94a3b8;
+        margin-bottom: 8px;
+      }
+
+      .empty-hint p {
+        color: #94a3b8;
+      }
+    `}}typeof window<"u"&&!customElements.get("canvas-drawing-editor")&&customElements.define("canvas-drawing-editor",m),u.CanvasDrawingEditor=m,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
+//# sourceMappingURL=canvas-drawing-editor.umd.js.map