canvas-drawing-editor 2.0.8 → 2.0.9

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

@@ -1,11 +1,11 @@
-(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 g 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","initial-data"]}connectedCallback(){this.parseAttributes(),this.render(),this.setupEventListeners(),this.initCanvas(!0)}disconnectedCallback(){this.removeEventListeners()}attributeChangedCallback(t,i,s){if(i!==s){if(t==="initial-data"&&s&&this.canvas){this.loadInitialData(),this.renderCanvas(),this.renderMinimap();return}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)}loadInitialData(){const t=this.getAttribute("initial-data");if(t)try{const i=JSON.parse(t);i.objects&&Array.isArray(i.objects)&&(this.objects=i.objects,this.selectedId=null,this.scale=1,this.panOffset={x:0,y:0},this.updateZoomDisplay(),this.objects.forEach(s=>{if(s.type==="IMAGE"&&s.dataUrl){const e=new Image;e.onload=()=>{s.imageElement=e,this.renderCanvas(),this.renderMinimap()},e.src=s.dataUrl}}),this.updateUI())}catch(i){console.error("Failed to parse initial-data:",i)}}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(!1)}initCanvas(t=!1){!this.canvasContainer||!this.canvas||requestAnimationFrame(()=>{this.canvas.width=this.canvasContainer.clientWidth,this.canvas.height=this.canvasContainer.clientHeight,t&&this.loadInitialData(),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,o=(e-i.top-this.panOffset.y)/this.scale;return{x:n,y:o}}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(a=>a.x)),e=Math.max(...i.points.map(a=>a.x)),n=Math.min(...i.points.map(a=>a.y)),o=Math.max(...i.points.map(a=>a.y));return{x:s,y:n,width:e-s,height:o-n}}}return{x:0,y:0,width:0,height:0}}getResizeHandleAtPoint(t,i,s){const e=this.getObjectBounds(t),n=8,o=[{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 a of o)if(Math.abs(i-a.x)<=n&&Math.abs(s-a.y)<=n)return a.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)),o=Math.max(...e.points.map(r=>r.x)),a=Math.min(...e.points.map(r=>r.y)),l=Math.max(...e.points.map(r=>r.y));return i>=n&&i<=o&&s>=a&&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,o=this.scale*n;this.zoomAtPoint(o,s,e)}zoomAtPoint(t,i,s){const e=Math.min(Math.max(t,.2),5),n=(i-this.panOffset.x)/this.scale,o=(s-this.panOffset.y)/this.scale,a=i-n*e,l=s-o*e;this.scale=e,this.panOffset={x:a,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 o=this.objects.find(a=>a.id===this.selectedId);if(o){const a=this.getResizeHandleAtPoint(o,i,s);if(a){this.saveHistory(),this.isResizing=!0,this.resizeHandle=a,this.resizeStartBounds=this.getObjectBounds(o),this.resizeOriginalObject=JSON.parse(JSON.stringify(o));return}}}const n=[...this.objects].reverse().find(o=>this.isHit(o,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,o=e.y-this.panStart.y;this.panOffset={x:this.panOffset.x+n,y:this.panOffset.y+o},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,o=s-this.dragStart.y;let a=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")&&(a=this.resizeStartBounds.x+n,r=this.resizeStartBounds.width-n),this.resizeHandle.includes("s")&&(h=this.resizeStartBounds.height+o),this.resizeHandle.includes("n")&&(l=this.resizeStartBounds.y+o,h=this.resizeStartBounds.height-o),r=Math.max(10,r),h=Math.max(10,h),e.type){case"RECTANGLE":case"IMAGE":e.x=a,e.y=l,e.width=r,e.height=h;break;case"CIRCLE":{const d=Math.max(r,h)/2;e.x=a+d,e.y=l+d,e.radius=d;break}case"TEXT":{const d=this.resizeOriginalObject,c=r/this.resizeStartBounds.width;e.x=a,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(m=>({x:a+(m.x-this.resizeStartBounds.x)*c,y:l+(m.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,o=i-this.dragStart.x,a=s-this.dragStart.y;n.points=n.points.map(l=>({x:l.x+o,y:l.y+a})),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(),this.updateUI()}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 o=n.x*this.scale+this.panOffset.x,a=n.y*this.scale+this.panOffset.y;this.showTextInput(o,a,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(o=>{t.beginPath(),t.rect(o.x-e/2,o.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,o=i.width*n,a=i.height*n,l=(t.width-o)/2,r=(t.height-a)/2;this.minimapCtx.fillStyle="#ffffff",this.minimapCtx.fillRect(l,r,o,a),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=Math.max(d.lineWidth,1),this.minimapCtx.setLineDash([]),d.type){case"RECTANGLE":{const c=d;this.minimapCtx.strokeRect(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.stroke();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,o,a)}handleMinimapClick(t){const i=this.minimapCanvas.getBoundingClientRect(),s=t.clientX-i.left,e=t.clientY-i.top,n=this.minimapCanvas.width/this.canvas.width,o=this.minimapCanvas.height/this.canvas.height,a=Math.min(n,o)*.92,l=this.canvas.width*a,r=this.canvas.height*a,h=(this.minimapCanvas.width-l)/2,d=(this.minimapCanvas.height-r)/2,c=s-h,p=e-d,m=(c/a-this.panOffset.x)/this.scale,x=(p/a-this.panOffset.y)/this.scale,b=this.canvas.width/2,v=this.canvas.height/2;this.panOffset={x:b/this.scale-m,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 o=(l=n.target)==null?void 0:l.result,a=new Image;a.onload=()=>{this.saveHistory();const r=300;let h=a.width,d=a.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:o,imageElement:a};this.objects.push(c),this.selectedId=c.id,this.setTool("SELECT"),this.renderCanvas(),this.renderMinimap(),this.updateUI(),this.dispatchChangeEvent()},a.src=o},e.readAsDataURL(s),i.value=""}saveJson(){const t={version:"1.0",objects:this.objects.map(o=>{const{imageElement:a,...l}=o;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 o;try{const a=JSON.parse((o=n.target)==null?void 0:o.result);a.objects&&Array.isArray(a.objects)&&(this.saveHistory(),this.objects=a.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(a){console.error("Failed to load JSON:",a)}},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 e=this.objects.find(n=>n.id===this.selectedId);if(e){const o={RECTANGLE:"矩形",CIRCLE:"圆形",PATH:"画笔",TEXT:"文本",IMAGE:"图片"}[e.type]||e.type;t.innerHTML=`
-            <span class="selection-label">已选择: ${o}</span>
+(function(d,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(d=typeof globalThis<"u"?globalThis:d||self,u(d.CanvasDrawingEditor={}))})(this,(function(d){"use strict";const u={title:"Canvas Editor",showPencil:!0,showRectangle:!0,showCircle:!0,showText:!0,showImage:!0,showZoom:!0,showDownload:!0,showExport:!0,showImport:!0,showColor:!0};class g extends HTMLElement{constructor(){super(),this.config={...u},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","initial-data"]}connectedCallback(){this.parseAttributes(),this.render(),this.setupEventListeners(),this.initCanvas(!0)}disconnectedCallback(){this.removeEventListeners()}attributeChangedCallback(t,s,i){if(s!==i){if(t==="initial-data"&&i&&this.canvas){this.loadInitialData(),this.renderCanvas();return}this.parseAttributes(),this.container&&this.updateUI()}}parseAttributes(){this.config={title:this.getAttribute("title")||u.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"}}generateId(){return Math.random().toString(36).substr(2,9)}loadInitialData(){const t=this.getAttribute("initial-data");if(t)try{const s=JSON.parse(t);s.objects&&Array.isArray(s.objects)&&(this.objects=s.objects,this.selectedId=null,this.scale=1,this.panOffset={x:0,y:0},this.updateZoomDisplay(),this.objects.forEach(i=>{if(i.type==="IMAGE"&&i.dataUrl){const e=new Image;e.onload=()=>{i.imageElement=e,this.renderCanvas()},e.src=i.dataUrl}}),this.updateUI())}catch(s){console.error("Failed to parse initial-data:",s)}}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(!1)}initCanvas(t=!1){!this.canvasContainer||!this.canvas||requestAnimationFrame(()=>{this.canvas.width=this.canvasContainer.clientWidth,this.canvas.height=this.canvasContainer.clientHeight,t&&this.loadInitialData(),this.renderCanvas()})}getMousePos(t){const s=this.canvas.getBoundingClientRect();let i,e;if("touches"in t&&t.touches.length>0)i=t.touches[0].clientX,e=t.touches[0].clientY;else if("clientX"in t)i=t.clientX,e=t.clientY;else return{x:0,y:0};const n=(i-s.left-this.panOffset.x)/this.scale,a=(e-s.top-this.panOffset.y)/this.scale;return{x:n,y:a}}getScreenPos(t){const s=this.canvas.getBoundingClientRect();let i,e;if("touches"in t&&t.touches.length>0)i=t.touches[0].clientX,e=t.touches[0].clientY;else if("clientX"in t)i=t.clientX,e=t.clientY;else return{x:0,y:0};return{x:i-s.left,y:e-s.top}}getObjectBounds(t){switch(t.type){case"RECTANGLE":case"IMAGE":{const s=t;return{x:s.x,y:s.y,width:s.width,height:s.height}}case"CIRCLE":{const s=t;return{x:s.x-s.radius,y:s.y-s.radius,width:s.radius*2,height:s.radius*2}}case"TEXT":{const s=t,i=s.text.length*s.fontSize*.6;return{x:s.x,y:s.y-s.fontSize,width:i,height:s.fontSize}}case"PATH":{const s=t;if(s.points.length===0)return{x:0,y:0,width:0,height:0};const i=Math.min(...s.points.map(o=>o.x)),e=Math.max(...s.points.map(o=>o.x)),n=Math.min(...s.points.map(o=>o.y)),a=Math.max(...s.points.map(o=>o.y));return{x:i,y:n,width:e-i,height:a-n}}}return{x:0,y:0,width:0,height:0}}getResizeHandleAtPoint(t,s,i){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(s-o.x)<=n&&Math.abs(i-o.y)<=n)return o.name;return null}isHit(t,s,i){switch(t.type){case"RECTANGLE":{const e=t;return s>=e.x&&s<=e.x+e.width&&i>=e.y&&i<=e.y+e.height}case"CIRCLE":{const e=t;return Math.sqrt(Math.pow(s-e.x,2)+Math.pow(i-e.y,2))<=e.radius}case"IMAGE":{const e=t;return s>=e.x&&s<=e.x+e.width&&i>=e.y&&i<=e.y+e.height}case"TEXT":{const e=t;return s>=e.x&&s<=e.x+e.text.length*e.fontSize*.6&&i>=e.y-e.fontSize&&i<=e.y}case"PATH":{const e=t;if(e.points.length===0)return!1;const n=Math.min(...e.points.map(h=>h.x)),a=Math.max(...e.points.map(h=>h.x)),o=Math.min(...e.points.map(h=>h.y)),l=Math.max(...e.points.map(h=>h.y));return s>=n&&s<=a&&i>=o&&i<=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.dispatchChangeEvent())}deleteSelected(){this.selectedId&&(this.saveHistory(),this.objects=this.objects.filter(t=>t.id!==this.selectedId),this.selectedId=null,this.renderCanvas(),this.updateUI(),this.dispatchChangeEvent())}copySelected(){if(this.selectedId){const t=this.objects.find(s=>s.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(s=>({x:s.x+20,y:s.y+20}))),this.objects.push(t),this.selectedId=t.id,this.clipboard=t,this.renderCanvas(),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 s=this.canvas.getBoundingClientRect(),i=t.clientX-s.left,e=t.clientY-s.top,n=t.deltaY>0?.9:1.1,a=this.scale*n;this.zoomAtPoint(a,i,e)}zoomAtPoint(t,s,i){const e=Math.min(Math.max(t,.2),5),n=(s-this.panOffset.x)/this.scale,a=(i-this.panOffset.y)/this.scale,o=s-n*e,l=i-a*e;this.scale=e,this.panOffset={x:o,y:l},this.renderCanvas(),this.updateZoomDisplay()}zoomIn(){const t=this.canvas.width/2,s=this.canvas.height/2;this.zoomAtPoint(this.scale*1.2,t,s)}zoomOut(){const t=this.canvas.width/2,s=this.canvas.height/2;this.zoomAtPoint(this.scale/1.2,t,s)}resetZoom(){this.scale=1,this.panOffset={x:0,y:0},this.renderCanvas(),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(s=>{s.getAttribute("data-tool")===this.tool?s.classList.add("active"):s.classList.remove("active")})}hideTextInput(){this.isTextInputVisible=!1,this.textInputContainer&&(this.textInputContainer.style.display="none"),this.editingTextId=null}showTextInput(t,s,i=""){this.isTextInputVisible=!0,this.textInputScreenPos={x:t,y:s},this.textInputContainer&&this.textInput&&(this.textInputContainer.style.display="block",this.textInputContainer.style.left=`${t}px`,this.textInputContainer.style.top=`${s-30}px`,this.textInput.value=i,this.textInput.style.color=this.color,setTimeout(()=>{this.textInput.focus(),i&&this.textInput.select()},0))}submitText(){var s,i;const t=(i=(s=this.textInput)==null?void 0:s.value)==null?void 0:i.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.updateUI()}handleCanvasPointerDown(t){const{x:s,y:i}=this.getMousePos(t),e=this.getScreenPos(t);if(this.dragStart={x:s,y:i},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,s,i);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,s,i));n?(this.selectedId=n.id,this.dragOffset={x:s-n.x,y:i-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:s,y:i},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:s,y:i,width:0,height:0,color:this.color,lineWidth:this.lineWidth}:this.tool==="CIRCLE"?this.currentObject={id:n,type:"CIRCLE",x:s,y:i,radius:0,color:this.color,lineWidth:this.lineWidth}:this.tool==="PENCIL"&&(this.currentObject={id:n,type:"PATH",x:s,y:i,points:[{x:s,y:i}],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();return}if(!this.isDragging||!this.dragStart)return;const{x:s,y:i}=this.getMousePos(t);if(this.isResizing&&this.selectedId&&this.resizeHandle&&this.resizeStartBounds&&this.resizeOriginalObject){const e=this.objects.find(c=>c.id===this.selectedId);if(!e)return;const n=s-this.dragStart.x,a=i-this.dragStart.y;let o=this.resizeStartBounds.x,l=this.resizeStartBounds.y,h=this.resizeStartBounds.width,r=this.resizeStartBounds.height;switch(this.resizeHandle.includes("e")&&(h=this.resizeStartBounds.width+n),this.resizeHandle.includes("w")&&(o=this.resizeStartBounds.x+n,h=this.resizeStartBounds.width-n),this.resizeHandle.includes("s")&&(r=this.resizeStartBounds.height+a),this.resizeHandle.includes("n")&&(l=this.resizeStartBounds.y+a,r=this.resizeStartBounds.height-a),h=Math.max(10,h),r=Math.max(10,r),e.type){case"RECTANGLE":case"IMAGE":e.x=o,e.y=l,e.width=h,e.height=r;break;case"CIRCLE":{const c=Math.max(h,r)/2;e.x=o+c,e.y=l+c,e.radius=c;break}case"TEXT":{const c=this.resizeOriginalObject,p=h/this.resizeStartBounds.width;e.x=o,e.y=l+r,e.fontSize=Math.max(8,Math.round(c.fontSize*p));break}case"PATH":{const c=this.resizeOriginalObject,p=h/this.resizeStartBounds.width,f=r/this.resizeStartBounds.height;e.points=c.points.map(b=>({x:o+(b.x-this.resizeStartBounds.x)*p,y:l+(b.y-this.resizeStartBounds.y)*f}));break}}this.renderCanvas();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=s-this.dragStart.x,o=i-this.dragStart.y;n.points=n.points.map(l=>({x:l.x+a,y:l.y+o})),this.dragStart={x:s,y:i}}else e.x=s-this.dragOffset.x,e.y=i-this.dragOffset.y;this.renderCanvas()}}else if(this.currentObject){if(this.currentObject.type==="RECTANGLE")this.currentObject.width=s-this.currentObject.x,this.currentObject.height=i-this.currentObject.y;else if(this.currentObject.type==="CIRCLE"){const e=Math.sqrt(Math.pow(s-this.currentObject.x,2)+Math.pow(i-this.currentObject.y,2));this.currentObject.radius=e}else this.currentObject.type==="PATH"&&this.currentObject.points.push({x:s,y:i});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.updateUI()}handleCanvasDoubleClick(t){t.preventDefault();const{x:s,y:i}=this.getMousePos(t),e=[...this.objects].reverse().find(n=>this.isHit(n,s,i));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)),this.currentObject&&this.drawObject(this.ctx,this.currentObject),this.selectedId&&this.tool==="SELECT"){const t=this.objects.find(s=>s.id===this.selectedId);t&&this.drawSelectionHandles(this.ctx,t)}this.ctx.restore()}}drawObject(t,s){switch(t.beginPath(),t.strokeStyle=s.color,t.lineWidth=s.lineWidth,t.fillStyle=s.color,s.id===this.selectedId?(t.shadowColor="rgba(0, 100, 255, 0.5)",t.shadowBlur=10):t.shadowBlur=0,s.type){case"RECTANGLE":{const i=s;t.strokeRect(i.x,i.y,i.width,i.height);break}case"CIRCLE":{const i=s;t.beginPath(),t.arc(i.x,i.y,i.radius,0,2*Math.PI),t.stroke();break}case"PATH":{const i=s;if(i.points.length<2)break;t.beginPath(),t.lineCap="round",t.lineJoin="round",t.moveTo(i.points[0].x,i.points[0].y);for(let e=1;e<i.points.length;e++)t.lineTo(i.points[e].x,i.points[e].y);t.stroke();break}case"TEXT":{const i=s;t.font=`${i.fontSize}px sans-serif`,t.fillText(i.text,i.x,i.y);break}case"IMAGE":{const i=s;if(i.imageElement&&i.imageElement.complete)t.drawImage(i.imageElement,i.x,i.y,i.width,i.height);else if(i.dataUrl){const e=new Image;e.onload=()=>{i.imageElement=e,this.renderCanvas()},e.src=i.dataUrl}break}}}drawSelectionHandles(t,s){const i=this.getObjectBounds(s),e=8;t.shadowBlur=0,t.fillStyle="#3b82f6",t.strokeStyle="#ffffff",t.lineWidth=2,[{x:i.x,y:i.y},{x:i.x+i.width,y:i.y},{x:i.x,y:i.y+i.height},{x:i.x+i.width,y:i.y+i.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(i.x,i.y,i.width,i.height),t.setLineDash([])}handleImageUpload(t){const s=t.target;if(!s.files||s.files.length===0)return;const i=s.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 h=300;let r=o.width,c=o.height;if(r>h||c>h){const f=Math.min(h/r,h/c);r*=f,c*=f}const p={id:this.generateId(),type:"IMAGE",x:100,y:100,width:r,height:c,color:"#000000",lineWidth:1,dataUrl:a,imageElement:o};this.objects.push(p),this.selectedId=p.id,this.setTool("SELECT"),this.renderCanvas(),this.updateUI(),this.dispatchChangeEvent()},o.src=a},e.readAsDataURL(i),s.value=""}saveJson(){const t={version:"1.0",objects:this.objects.map(a=>{const{imageElement:o,...l}=a;return l})},s=JSON.stringify(t,null,2),i=new Blob([s],{type:"application/json"}),e=URL.createObjectURL(i),n=document.createElement("a");n.href=e,n.download="canvas-project.json",n.click(),URL.revokeObjectURL(e)}loadJson(t){const s=t.target;if(!s.files||s.files.length===0)return;const i=s.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 h=new Image;h.onload=()=>{l.imageElement=h,this.renderCanvas()},h.src=l.dataUrl}}),this.renderCanvas(),this.updateUI(),this.dispatchChangeEvent())}catch(o){console.error("Failed to load JSON:",o)}},e.readAsText(i),s.value=""}exportPng(){const t=document.createElement("canvas");t.width=this.canvas.width,t.height=this.canvas.height;const s=t.getContext("2d");s.fillStyle="#ffffff",s.fillRect(0,0,t.width,t.height),s.translate(this.panOffset.x,this.panOffset.y),s.scale(this.scale,this.scale),this.objects.forEach(n=>this.drawObject(s,n,!0));const i=t.toDataURL("image/png"),e=document.createElement("a");e.href=i,e.download="canvas-export.png",e.click()}updateUI(){const t=this.shadow.querySelector(".selection-info");if(t)if(this.selectedId){const e=this.objects.find(n=>n.id===this.selectedId);if(e){const a={RECTANGLE:"矩形",CIRCLE:"圆形",PATH:"画笔",TEXT:"文本",IMAGE:"图片"}[e.type]||e.type;t.innerHTML=`
+            <span class="selection-label">已选择: ${a}</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);const s=this.shadow.querySelector(".empty-hint");s&&(s.style.display=this.objects.length===0?"flex":"none")}render(){this.shadow.innerHTML=`
+          `,t.classList.add("visible");const o=t.querySelector(".delete-btn");o&&o.addEventListener("click",()=>this.deleteSelected())}}else t.classList.remove("visible"),t.innerHTML="";const s=this.shadow.querySelector(".undo-btn");s&&(s.disabled=this.history.length===0);const i=this.shadow.querySelector(".empty-hint");i&&(i.style.display=this.objects.length===0?"flex":"none")}render(){this.shadow.innerHTML=`
       <style>${this.getStyles()}</style>
       <div class="editor-container">
         <!-- 左侧工具栏 -->
@@ -97,19 +97,6 @@
           <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;">
               <div class="text-input-hint">按 Enter 确认，Esc 取消</div>
@@ -124,10 +111,10 @@
           </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("mousedown",d=>{d.preventDefault()}),h.addEventListener("click",()=>{this.isTextInputVisible&&this.submitText();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"),o=this.shadow.querySelector(".zoom-text");e&&e.addEventListener("click",()=>this.zoomIn()),n&&n.addEventListener("click",()=>this.zoomOut()),o&&o.addEventListener("click",()=>this.resetZoom());const a=this.shadow.querySelector(".save-json-btn"),l=this.shadow.querySelector(".load-json-input"),r=this.shadow.querySelector(".export-png-btn");a&&a.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={"select-icon":'<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/>',"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}">
+    `,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.textInputContainer=this.shadow.querySelector(".text-input-container"),this.textInput=this.shadow.querySelector(".text-input"),this.bindEvents()}bindEvents(){this.canvas.addEventListener("mousedown",r=>this.handleCanvasPointerDown(r)),this.canvas.addEventListener("mousemove",r=>this.handleCanvasPointerMove(r)),this.canvas.addEventListener("mouseup",()=>this.handleCanvasPointerUp()),this.canvas.addEventListener("mouseleave",()=>this.handleCanvasPointerUp()),this.canvas.addEventListener("dblclick",r=>this.handleCanvasDoubleClick(r)),this.canvas.addEventListener("touchstart",r=>this.handleCanvasPointerDown(r)),this.canvas.addEventListener("touchmove",r=>this.handleCanvasPointerMove(r)),this.canvas.addEventListener("touchend",()=>this.handleCanvasPointerUp()),this.canvas.addEventListener("wheel",this.boundHandleWheel,{passive:!1}),this.shadow.querySelectorAll(".tool-btn[data-tool]").forEach(r=>{r.addEventListener("mousedown",c=>{c.preventDefault()}),r.addEventListener("click",()=>{this.isTextInputVisible&&this.submitText();const c=r.getAttribute("data-tool");this.setTool(c)})});const t=this.shadow.querySelector(".undo-btn");t&&t.addEventListener("click",()=>this.undo());const s=this.shadow.querySelector(".color-picker");s&&s.addEventListener("input",r=>{this.color=r.target.value});const i=this.shadow.querySelector(".image-input");i&&i.addEventListener("change",r=>this.handleImageUpload(r));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"),h=this.shadow.querySelector(".export-png-btn");o&&o.addEventListener("click",()=>this.saveJson()),l&&l.addEventListener("change",r=>this.loadJson(r)),h&&h.addEventListener("click",()=>this.exportPng()),this.textInput&&(this.textInput.addEventListener("keydown",r=>{r.key==="Enter"?(r.preventDefault(),this.submitText()):r.key==="Escape"&&this.hideTextInput()}),this.textInput.addEventListener("blur",()=>{this.isTextInputVisible&&this.submitText()}))}createToolButton(t,s,i){const e={"select-icon":'<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/>',"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="${i}">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          ${e[i]}
+          ${e[s]}
         </svg>
       </button>
     `}getStyles(){return`
@@ -365,53 +352,6 @@
         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;
@@ -463,5 +403,5 @@
       .empty-hint p {
         color: #94a3b8;
       }
-    `}}typeof window<"u"&&!customElements.get("canvas-drawing-editor")&&customElements.define("canvas-drawing-editor",g),u.CanvasDrawingEditor=g,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
+    `}}typeof window<"u"&&!customElements.get("canvas-drawing-editor")&&customElements.define("canvas-drawing-editor",g),d.CanvasDrawingEditor=g,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
 //# sourceMappingURL=canvas-drawing-editor.umd.js.map