@wbiokr/arrow 1.2.1 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -1
- package/dist/bundle.cjs.js +1 -1
- package/dist/bundle.cjs.js.map +1 -1
- package/dist/bundle.esm.js +1 -1
- package/dist/bundle.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/bundle.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var t=Object.defineProperty,e=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,o=(e,s,n)=>s in e?t(e,s,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[s]=n,r=(t,r)=>{for(var a in r||(r={}))s.call(r,a)&&o(t,a,r[a]);if(e)for(var a of e(r))n.call(r,a)&&o(t,a,r[a]);return t};import{Keybinding as a}from"@wbiokr/keybinding";if("undefined"!=typeof document){const t=document.createElement("style");t.textContent='\n.ae-d2-container {\n position: relative;\n width: 1000px;\n height: 600px;\n background: #fff;\n margin: auto;\n}\n\n.ae-d2-svg {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 10;\n}\n\n\n.ae-arrow-path {\n fill: none;\n stroke-linejoin: round;\n cursor: pointer;\n}\n\n.ae-arrow-path:hover {\n stroke: #00aaff;\n}\n\n.ae-transform-box {\n fill: none;\n stroke: #00aaff;\n stroke-width: 2;\n stroke-dasharray: 4;\n}\n\n.ae-transform-handle {\n fill: #fff;\n stroke: #00aaff;\n stroke-width: 2;\n cursor: pointer;\n}\n\n.ae-transform-handle:hover {\n fill: #00aaff;\n}\n\n.ae-rotate-handle {\n fill: #fff;\n stroke: #ff6600;\n stroke-width: 2;\n cursor: grab;\n}\n\n.ae-rotate-handle:hover {\n fill: #ff6600;\n}\n\n.ae-rotate-line {\n stroke: #ff6600;\n stroke-width: 1;\n stroke-dasharray: 4;\n}\n\n/* 工具条样式 */\n.ae-toolbar {\n position: fixed;\n display: none;\n flex-direction: column;\n gap: 10px;\n padding: 12px;\n background: #fff;\n border: 1px solid #ddd;\n border-radius: 8px;\n box-shadow: 0 2px 12px rgba(0,0,0,0.15);\n z-index: 10000;\n pointer-events: auto;\n min-width: 140px;\n}\n\n.ae-toolbar-drag-handle {\n cursor: grab;\n text-align: center;\n padding: 4px;\n color: #999;\n font-size: 14px;\n line-height: 1;\n user-select: none;\n border-bottom: 1px solid #eee;\n margin: -12px -12px 8px -12px;\n padding-top: 8px;\n padding-bottom: 8px;\n border-radius: 8px 8px 0 0;\n}\n\n.ae-toolbar-drag-handle:active {\n cursor: grabbing;\n}\n\n.ae-toolbar-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.ae-toolbar-row {\n display: flex;\n gap: 8px;\n}\n\n.ae-toolbar-label {\n font-size: 11px;\n color: #666;\n}\n\n.ae-scale-btn {\n flex: 1;\n padding: 6px 8px;\n background: #f0f0f0;\n color: #333;\n border: 1px solid #ccc;\n border-radius: 4px;\n cursor: pointer;\n font-size: 11px;\n transition: background 0.2s;\n}\n\n.ae-scale-btn:hover {\n background: #e0e0e0;\n}\n\n.ae-scale-btn:active {\n background: #d0d0d0;\n}\n\n.ae-toolbar input[type="color"] {\n width: 40px;\n height: 30px;\n border: 1px solid #ddd;\n border-radius: 4px;\n cursor: pointer;\n padding: 0;\n background: none;\n}\n\n.ae-toolbar input[type="range"] {\n width: 120px;\n cursor: pointer;\n}\n\n.ae-toolbar-value {\n font-size: 10px;\n color: #999;\n text-align: right;\n}\n',document.head.appendChild(t)}class i{constructor(t,e={}){var s;this.container="string"==typeof t?document.querySelector(t):t,this.svg=null,this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.mode=null,this.lastClickTime=0,this.lastClickPos=null,this._shouldBlockClick=!1,this._defaultColor="#2b8cff",this.isCtrl=e.isCtrl||!1,this.stopPropagation=e.stopPropagation||!1,this.preventDefault=e.preventDefault||!1,this.onDrawEnd=e.onDrawEnd||null,this.onRemove=e.onRemove||null,this.onChange=e.onChange||null,this._defaultColor=e.defaultColor||this._defaultColor,this._strokeWidth=e.defaultStrokeWidth||8,this._curveRate=null!=(s=e.defaultCurveRate)?s:0,this._transformMode=null,this._transformHandle=null,this._transformStartPos=null,this._transformStartPoints=null,this._transformCenter=null,this._transformStartAngle=null,this._rotationOffset=0,this._toolbar=null,this._lastMousePos=null,this._createSVG(),this._initKeybindings(),this._initEvents()}_createSVG(){if("undefined"!=typeof getComputedStyle){"static"===getComputedStyle(this.container).position&&(this.container.style.position="relative")}this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.setAttribute("class","ae-d2-svg"),this.container.appendChild(this.svg);const t=document.createElementNS("http://www.w3.org/2000/svg","defs");this.svg.appendChild(t);const e=document.createElementNS("http://www.w3.org/2000/svg","marker");e.setAttribute("id","ae-arrowhead"),e.setAttribute("markerWidth","10"),e.setAttribute("markerHeight","10"),e.setAttribute("refX","9"),e.setAttribute("refY","5"),e.setAttribute("orient","auto");const s=document.createElementNS("http://www.w3.org/2000/svg","polygon");s.setAttribute("points","0,0 10,5 0,10 2,5"),s.setAttribute("fill",this._defaultColor),e.appendChild(s),t.appendChild(e)}_createToolbar(){var t,e;this._toolbar&&this._toolbar.remove(),this._toolbar=document.createElement("div"),this._toolbar.className="ae-toolbar";const s=this.selected.color||this._defaultColor,n=this.selected.strokeWidth||this._strokeWidth,o=null!=(e=null!=(t=this.selected.curveRate)?t:this.selected.cornerRoundness)?e:0;this._toolbar.innerHTML=`\n <div class="ae-toolbar-drag-handle">:::</div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">颜色</span>\n <input type="color" class="ae-color-input" value="${s}" />\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">粗细</span>\n <input type="range" class="ae-stroke-input" min="1" max="60" value="${n}" />\n <span class="ae-toolbar-value">${n}px</span>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">曲线率</span>\n <input type="range" class="ae-round-input" min="0" max="1" step="0.1" value="${o}" />\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">缩放</span>\n <div class="ae-toolbar-row">\n <button class="ae-scale-btn" data-axis="x">X 缩放</button>\n <button class="ae-scale-btn" data-axis="y">Y 缩放</button>\n </div>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">3D 旋转</span>\n <div class="ae-toolbar-row">\n <button class="ae-scale-btn" data-axis="x-rotate">X 轴</button>\n <button class="ae-scale-btn" data-axis="y-rotate">Y 轴</button>\n </div>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">2.5D 挤出</span>\n <div class="ae-toolbar-row">\n <button class="ae-scale-btn" data-mode="extrude-up">上挤出</button>\n <button class="ae-scale-btn" data-mode="extrude-down">下挤出</button>\n </div>\n <div class="ae-toolbar-row" style="margin-top:4px;">\n <button class="ae-scale-btn" data-mode="extrude-left">左挤出</button>\n <button class="ae-scale-btn" data-mode="extrude-right">右挤出</button>\n </div>\n <div class="ae-toolbar-row" style="margin-top:4px;">\n <button class="ae-scale-btn" data-mode="reset">重置</button>\n </div>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">2.5D 透视</span>\n <div class="ae-toolbar-row">\n <button class="ae-scale-btn" data-perspective="top">上透视</button>\n <button class="ae-scale-btn" data-perspective="bottom">下透视</button>\n </div>\n <div class="ae-toolbar-row" style="margin-top:4px;">\n <button class="ae-scale-btn" data-perspective="left">左透视</button>\n <button class="ae-scale-btn" data-perspective="right">右透视</button>\n </div>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">倾斜</span>\n <div class="ae-toolbar-row">\n <button class="ae-scale-btn" data-skew="x-left">左倾斜</button>\n <button class="ae-scale-btn" data-skew="x-right">右倾斜</button>\n </div>\n <div class="ae-toolbar-row" style="margin-top:4px;">\n <button class="ae-scale-btn" data-skew="y-up">上倾斜</button>\n <button class="ae-scale-btn" data-skew="y-down">下倾斜</button>\n </div>\n <div class="ae-toolbar-row" style="margin-top:4px;">\n <button class="ae-scale-btn" data-mode="reset">重置</button>\n </div>\n </div>\n `;this._toolbar.querySelector(".ae-color-input").addEventListener("input",t=>{this.selected&&(this.selected.color=t.target.value,this._defaultColor=t.target.value,this._updateMarkerColor(t.target.value),this.render(),this.onChange&&this.onChange({type:"color",arrow:this.selected,value:t.target.value,arrows:this.getData()}))});const a=this._toolbar.querySelector(".ae-stroke-input"),i=this._toolbar.querySelector(".ae-stroke-input + .ae-toolbar-value");a.addEventListener("input",t=>{this.selected&&(this.selected.strokeWidth=parseInt(t.target.value),i.textContent=t.target.value+"px",this.render(),this.onChange&&this.onChange({type:"strokeWidth",arrow:this.selected,value:parseInt(t.target.value),arrows:this.getData()}))});this._toolbar.querySelector(".ae-round-input").addEventListener("input",t=>{this.selected&&(this.selected.curveRate=parseFloat(t.target.value),this.render(),this.onChange&&this.onChange({type:"curveRate",arrow:this.selected,value:parseFloat(t.target.value),arrows:this.getData()}))});this._toolbar.querySelectorAll(".ae-scale-btn[data-axis]").forEach(t=>{t.addEventListener("click",t=>{t.stopPropagation();const e=t.target.dataset.axis;if("x-rotate"===e)return void this._startRotate3D("x");if("y-rotate"===e)return void this._startRotate3D("y");this._transformMode="scale",this._transformAxis=e,this._transformCenter=this._getArrowBBox(this.selected),this._transformStartPoints=this.selected.points.map(t=>r({},t));const s=this._getArrowBBox(this.selected);this._transformStartPos="x"===e?{x:s.maxX+10,y:s.centerY}:{x:s.centerX,y:s.maxY+10};const n=t=>{const s=this._mousePos(t);"x"===e?this._handleScaleX(s):this._handleScaleY(s),this.render()},o=()=>{document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o),this.onChange&&this.onChange({type:"scale",arrow:this.selected,arrows:this.getData()}),this._transformMode=null,this._transformAxis=null};document.addEventListener("mousemove",n),document.addEventListener("mouseup",o)})});this._toolbar.querySelectorAll(".ae-scale-btn[data-mode]").forEach(t=>{t.addEventListener("click",t=>{t.stopPropagation();const e=t.target.dataset.mode;"extrude-up"===e?this._applyExtrude(0,-15):"extrude-down"===e?this._applyExtrude(0,15):"extrude-left"===e?this._applyExtrude(-15,0):"extrude-right"===e?this._applyExtrude(15,0):"reset"===e&&this._resetExtrude()})});this._toolbar.querySelectorAll(".ae-scale-btn[data-perspective]").forEach(t=>{t.addEventListener("click",t=>{t.stopPropagation();const e=t.target.dataset.perspective;"top"===e?this._applyPerspective("top"):"bottom"===e?this._applyPerspective("bottom"):"left"===e?this._applyPerspective("left"):"right"===e&&this._applyPerspective("right")})});this._toolbar.querySelectorAll(".ae-scale-btn[data-skew]").forEach(t=>{t.addEventListener("click",t=>{t.stopPropagation();const e=t.target.dataset.skew;"x-left"===e?this._applySkew("x-left"):"x-right"===e?this._applySkew("x-right"):"y-up"===e?this._applySkew("y-up"):"y-down"===e&&this._applySkew("y-down")})});const l=this._toolbar.querySelector(".ae-toolbar-drag-handle");this._setupToolbarDrag(l),this._toolbar.addEventListener("mousedown",t=>{t.stopPropagation()}),this._toolbar.addEventListener("mouseup",t=>{t.stopPropagation()}),document.body.appendChild(this._toolbar)}_setupToolbarDrag(t){let e=!1,s={x:0,y:0};t.addEventListener("mousedown",t=>{e=!0,this._toolbarDragging=!0;const n=this._toolbar.getBoundingClientRect();s.x=t.clientX-n.left,s.y=t.clientY-n.top,t.preventDefault(),t.stopPropagation();const o=t=>{if(!e)return;let n=t.clientX-s.x,o=t.clientY-s.y;this._toolbar.style.left=n+"px",this._toolbar.style.top=o+"px"},r=t=>{e=!1,this._toolbarDragging=!1,document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",r),this._toolbar.removeEventListener("mouseup",r),t.preventDefault(),t.stopPropagation()};document.addEventListener("mousemove",o),document.addEventListener("mouseup",r),this._toolbar.addEventListener("mouseup",r)})}_showToolbar(){var t,e;if(this.selected){this._toolbar||this._createToolbar(),this._toolbar.style.display="flex";const s=this.selected.color||this._defaultColor,n=this.selected.strokeWidth||this._strokeWidth,o=null!=(e=null!=(t=this.selected.curveRate)?t:this.selected.cornerRoundness)?e:0,r=this._toolbar.querySelector(".ae-color-input"),a=this._toolbar.querySelector(".ae-stroke-input"),i=this._toolbar.querySelector(".ae-stroke-input + .ae-toolbar-value"),l=this._toolbar.querySelector(".ae-round-input");r&&(r.value=s),a&&(a.value=n,i.textContent=n+"px"),l&&(l.value=o);const h=this.container.getBoundingClientRect(),c=this._getArrowBBox(this.selected),d=this._toolbar.offsetWidth||150,u=this._toolbar.offsetHeight||120;let p=h.left+c.maxX+20;p+d>window.innerWidth-10&&(p=h.left+c.minX-d-20);let g=h.top+c.centerY-u/2;g<10&&(g=10),g+u>window.innerHeight-10&&(g=window.innerHeight-u-10),this._toolbar.style.left=p+"px",this._toolbar.style.top=g+"px"}}_hideToolbar(){this._toolbar&&(this._toolbar.style.display="none")}_updateMarkerColor(t){const e=this.svg.querySelector("#ae-arrowhead polygon");e&&e.setAttribute("fill",t)}_initKeybindings(){this._kb=new a("arrow-editor-"+Math.random(),this.container),this._kb.on("enter",()=>{this._handleEnter()}),this._kb.on("esc",()=>{this._handleEsc()}),this._kb.on("delete",()=>{this._handleDelete()}),this._kb.on("backspace",()=>{this._handleDelete()}),this._kb.on("space",()=>{this._handleSpace()}),this._kb.on("arrowup",()=>{this._handleArrowKey(0,-1)}),this._kb.on("arrowdown",()=>{this._handleArrowKey(0,1)}),this._kb.on("arrowleft",()=>{this._handleArrowKey(-1,0)}),this._kb.on("arrowright",()=>{this._handleArrowKey(1,0)})}_handleSpace(){this.drawing&&this.current&&this._lastMousePos&&(this.current.points.push(r({},this._lastMousePos)),this.render())}_handleArrowKey(t,e){if(!this.selected)return;this.selected.points.forEach(s=>{s.x+=1*t,s.y+=1*e}),this.render(),this.onChange&&this.onChange({type:"move",arrow:this.selected,arrows:this.getData()})}_initEvents(){this.container.onclick=t=>{if(this._toolbar&&(t.target===this._toolbar||this._toolbar.contains(t.target)))return;this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation();const e=this._mousePos(t);this._handleClick(e,t)},this.container.onmousemove=t=>{this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation();const e=this._mousePos(t);this._lastMousePos=e,this._handleMouseMove(t,e)},this.container.onmousedown=t=>{if((!this._toolbar||t.target!==this._toolbar&&!this._toolbar.contains(t.target))&&(this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation(),this.selected)){const e=t.target.getAttribute("data-handle");if(e){this._transformMode="scaleX"===e||"scaleY"===e?"scale":e,this._transformHandle=e,this._transformAxis="scaleX"===e?"x":"scaleY"===e?"y":null;const s=this._mousePos(t);if(this._transformStartPos=s,this._transformStartPoints=this.selected.points.map(t=>({x:t.x,y:t.y})),this._transformCenter=this._getArrowBBox(this.selected),"rotate"===e){const t=this._transformCenter,e=s.x-t.centerX,n=s.y-t.centerY;this._transformStartAngle=Math.atan2(n,e),this._rotationOffset=0}return void t.stopPropagation()}this.mode="move"}},this.container.onmouseup=t=>{this._transformMode&&this.selected&&this.onChange&&this.onChange({type:this._transformMode,arrow:this.selected,arrows:this.getData()}),this.mode=null,this._transformMode=null,this._transformHandle=null,this._transformAxis=null}}_mousePos(t){const e=this.container.getBoundingClientRect();return{x:t.clientX-e.left,y:t.clientY-e.top}}_generatePath(t,e=0){if(t.length<2)return"";if(0===e){let e=`M ${t[0].x} ${t[0].y}`;for(let s=1;s<t.length;s++)e+=` L ${t[s].x} ${t[s].y}`;return e}let s=`M ${t[0].x} ${t[0].y}`;for(let n=0;n<t.length-1;n++){const o=t[n],r=t[n+1],a=r.x-o.x,i=r.y-o.y,l=Math.hypot(a,i);if(0===l)continue;let h=a,c=i;if(n>0){const e=t[n-1];h=o.x-e.x,c=o.y-e.y}let d=a,u=i;if(n<t.length-2){const e=t[n+2];d=e.x-r.x,u=e.y-r.y}const p=Math.hypot(h,c)||1,g=Math.hypot(d,u)||1,m=h/p,b=c/p,_=d/g,f=u/g,x=l*e*.3;s+=` C ${o.x+m*x} ${o.y+b*x} ${r.x-_*x} ${r.y-f*x} ${r.x} ${r.y}`}return s}_generateArrowHead(t,e=8){if(t.length<2)return"";const s=t[t.length-1];let n=t[t.length-2];if(t.length>=3){Math.hypot(s.x-n.x,s.y-n.y)<5&&(n=t[t.length-3])}const o=s.x-n.x,r=s.y-n.y,a=Math.hypot(o,r);if(a<1)return"";const i=o/a,l=r/a,h=e/8,c=22*h,d=20*h,u=s.x,p=s.y,g=i*(c/2),m=l*(c/2),b=u+g-i*c,_=p+m-l*c,f=-l;return`M ${u+g} ${p+m} L ${b+f*d} ${_+i*d} L ${b-f*d} ${_-i*d} Z`}_createArrowGroup(t,e){var s,n;const o=document.createElementNS("http://www.w3.org/2000/svg","g");o.setAttribute("data-index",e);const r=t.color||this._defaultColor,a=t.strokeWidth||this._strokeWidth,i=null!=(n=null!=(s=t.curveRate)?s:t.cornerRoundness)?n:0,l=t.extrude||{x:0,y:0};if(Math.max(Math.abs(l.x),Math.abs(l.y))>0){const e=l.x>0?1:-1,s=l.y>0?1:-1,n=Math.max(Math.abs(l.x),Math.abs(l.y));for(let r=1;r<=n;r++){const n=e*r,l=s*r,h=document.createElementNS("http://www.w3.org/2000/svg","path");h.setAttribute("class","ae-arrow-path"),h.style.stroke="#ccc",h.style.strokeWidth=a+"px",h.style.opacity="0.15",h.setAttribute("d",this._generatePath(t.points.map(t=>({x:t.x+n,y:t.y+l})),i)),o.appendChild(h);const c=document.createElementNS("http://www.w3.org/2000/svg","path");c.setAttribute("fill","#ccc"),c.setAttribute("fill-opacity","0.15"),c.setAttribute("d",this._generateArrowHead(t.points.map(t=>({x:t.x+n,y:t.y+l})),a)),o.appendChild(c)}}const h=document.createElementNS("http://www.w3.org/2000/svg","path");h.setAttribute("class","ae-arrow-path"),h.style.stroke=r,h.style.strokeWidth=a+"px",h.setAttribute("d",this._generatePath(t.points,i)),o.appendChild(h);const c=document.createElementNS("http://www.w3.org/2000/svg","path");if(c.setAttribute("fill",r),c.setAttribute("d",this._generateArrowHead(t.points,a)),o.appendChild(c),t===this.selected){const e=this._getArrowBBox(t),s=document.createElementNS("http://www.w3.org/2000/svg","rect");s.setAttribute("class","ae-transform-box"),s.setAttribute("x",e.minX-10),s.setAttribute("y",e.minY-10),s.setAttribute("width",e.width+20),s.setAttribute("height",e.height+20),o.appendChild(s);const n=document.createElementNS("http://www.w3.org/2000/svg","circle");n.setAttribute("class","ae-transform-handle"),n.setAttribute("cx",e.maxX+10),n.setAttribute("cy",e.maxY+10),n.setAttribute("r",6),n.setAttribute("data-handle","scale"),o.appendChild(n);const r=document.createElementNS("http://www.w3.org/2000/svg","circle");r.setAttribute("class","ae-transform-handle"),r.setAttribute("cx",e.maxX+10),r.setAttribute("cy",e.centerY),r.setAttribute("r",6),r.setAttribute("data-handle","scaleX"),o.appendChild(r);const a=document.createElementNS("http://www.w3.org/2000/svg","circle");a.setAttribute("class","ae-transform-handle"),a.setAttribute("cx",e.centerX),a.setAttribute("cy",e.maxY+10),a.setAttribute("r",6),a.setAttribute("data-handle","scaleY"),o.appendChild(a);const i=e.minY-30,l=e.centerX,h=document.createElementNS("http://www.w3.org/2000/svg","line");h.setAttribute("class","ae-rotate-line"),h.setAttribute("x1",e.centerX),h.setAttribute("y1",e.minY-10),h.setAttribute("x2",l),h.setAttribute("y2",i),o.appendChild(h);const c=document.createElementNS("http://www.w3.org/2000/svg","circle");c.setAttribute("class","ae-rotate-handle"),c.setAttribute("cx",l),c.setAttribute("cy",i),c.setAttribute("r",8),c.setAttribute("data-handle","rotate"),o.appendChild(c)}return o}render(){if(this.svg.querySelectorAll("g").forEach(t=>t.remove()),this.arrows.forEach((t,e)=>{const s=this._createArrowGroup(t,e);this.svg.appendChild(s)}),this.current){const t=this._createArrowGroup(this.current,this.arrows.length);this.svg.appendChild(t)}}_isDoubleClick(t){const e=Date.now(),s=e-this.lastClickTime;return this.lastClickTime=e,s<300&&this.lastClickPos&&Math.hypot(t.x-this.lastClickPos.x,t.y-this.lastClickPos.y)<10?(this.lastClickPos=null,!0):(this.lastClickPos=t,!1)}_handleClick(t,e){if(!this.isCtrl||e.ctrlKey)if(this._shouldBlockClick)this._shouldBlockClick=!1;else if(this._isDoubleClick(t)){if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const t=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:t,arrows:this.getData()})}}else{if(this.selected){for(const e of this.arrows)if(this._hitArrow(e,t))return void this.render();return this.selected=null,this._hideToolbar(),void this.render()}for(const e of this.arrows)if(this._hitArrow(e,t))return this.selected=e,this._showToolbar(),void this.render();this.drawing?this.current.points.push(t):(this.drawing=!0,this.current={points:[t,t],color:this._defaultColor},this.svg.classList.add("ae-d2-svg-fixed")),this.render()}}_handleEnter(){if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const t=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:t,arrows:this.getData()})}}_handleEsc(){this.drawing&&(this.drawing=!1,this.current=null,this.svg.classList.remove("ae-d2-svg-fixed")),this.selected&&(this.selected=null),this._hideColorPicker(),this._hideToolbar(),this.render()}_handleDelete(){if(this.selected){const t=this.selected,e=this.arrows.indexOf(this.selected);e>-1&&this.arrows.splice(e,1),this.selected=null,this._hideToolbar(),this.render(),this.onRemove&&this.onRemove({arrow:t,arrows:this.getData()})}}_showColorPicker(t){if(this._showingColorPicker)return void this._hideColorPicker();this._showingColorPicker=!0;const e=document.createElement("div");e.className="ae-color-picker-popup";const s=document.createElement("span");s.textContent="选择颜色",s.style.cssText="font-size: 12px; color: #666;";const n=document.createElement("input");n.type="color",n.value=this.selected.color||this._defaultColor,n.showPicker(),e.appendChild(s),e.appendChild(n);const o=this.container.getBoundingClientRect(),r=this._getArrowBBox(this.selected),a=o.left+r.minX-50,i=o.top+r.maxY+15;e.style.left=a+"px",e.style.top=i+"px",n.addEventListener("input",t=>{this.selected.color=t.target.value,this._defaultColor=t.target.value,this.render(),this.onChange&&this.onChange({type:"color",arrow:this.selected,value:t.target.value,arrows:this.getData()})});const l=t=>{e.contains(t.target)||(this._hideColorPicker(),document.removeEventListener("click",l))};document.body.appendChild(e),this._colorPickerPopup=e,document.addEventListener("click",l)}_hideColorPicker(){this._colorPickerPopup&&(this._colorPickerPopup.remove(),this._colorPickerPopup=null),this._showingColorPicker=!1}deleteSelected(){this.selected&&(this.arrows=this.arrows.filter(t=>t!==this.selected),this.selected=null,this.render())}_handleMouseMove(t,e){if(!this._toolbarDragging&&(!this._toolbar||t.target!==this._toolbar&&!this._toolbar.contains(t.target)))if(!this.isCtrl||t.ctrlKey){if(this.drawing&&(this.current.points[this.current.points.length-1]=e,this.render()),this._transformMode&&this.selected)return"rotate"===this._transformMode?this._handleRotate(e):"scale"===this._transformMode?"x"===this._transformAxis?this._handleScaleX(e):"y"===this._transformAxis?this._handleScaleY(e):this._handleScale(e):"rotate3d"===this._transformMode&&this._handleRotate3D(e),void this.render();if(this.selected&&"move"===this.mode){const e=t.movementX,s=t.movementY;0===e&&0===s||(this._shouldBlockClick=!0),this.selected.points.forEach(t=>{t.x+=e,t.y+=s}),this.render()}}else if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const t=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:t,arrows:this.getData()})}}_getArrowBBox(t){const e=t.points;let s=1/0,n=1/0,o=-1/0,r=-1/0;for(const a of e)s=Math.min(s,a.x),n=Math.min(n,a.y),o=Math.max(o,a.x),r=Math.max(r,a.y);return{minX:s,minY:n,maxX:o,maxY:r,width:o-s,height:r-n,centerX:(s+o)/2,centerY:(n+r)/2}}_handleRotate(t){const e=this._transformCenter,s=e.centerX,n=e.centerY,o=Math.atan2(t.y-n,t.x-s)-Math.atan2(this._transformStartPos.y-n,this._transformStartPos.x-s),r=Math.cos(o),a=Math.sin(o);this.selected.points.forEach((t,e)=>{const o=this._transformStartPoints[e].x-s,i=this._transformStartPoints[e].y-n;t.x=s+o*r-i*a,t.y=n+o*a+i*r})}_handleScale(t){const e=this._transformCenter,s=e.centerX,n=e.centerY,o=this._transformStartPoints,r=this._transformStartPos,a=t.x-s,i=t.y-n,l=r.x-s,h=r.y-n,c=Math.hypot(a,i)/Math.hypot(l,h);this.selected.points.forEach((t,e)=>{t.x=s+(o[e].x-s)*c,t.y=n+(o[e].y-n)*c})}_handleScaleX(t){const e=this._transformCenter.centerX,s=this._transformStartPoints,n=this._transformStartPos,o=t.x-e,r=n.x-e,a=0!==r?o/r:1;this.selected.points.forEach((t,n)=>{t.x=e+(s[n].x-e)*a,t.y=s[n].y})}_handleScaleY(t){const e=this._transformCenter.centerY,s=this._transformStartPoints,n=this._transformStartPos,o=t.y-e,r=n.y-e,a=0!==r?o/r:1;this.selected.points.forEach((t,n)=>{t.x=s[n].x,t.y=e+(s[n].y-e)*a})}_startRotate3D(t){if(!this.selected)return;this._transformMode="rotate3d",this._transformAxis=t,this._transformCenter=this._getArrowBBox(this.selected),this._transformStartPoints=this.selected.points.map(t=>r({},t)),this._rotation3DStartAngle=0;const e=this._getArrowBBox(this.selected);this._transformStartPos="x"===t?{x:e.maxX+50,y:e.centerY}:{x:e.centerX,y:e.maxY+50};const s=t=>{const e=this._mousePos(t);this._handleRotate3D(e),this.render()},n=()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",n),this.onChange&&this.onChange({type:"rotate3d",arrow:this.selected,value:t,arrows:this.getData()}),this._transformMode=null,this._transformAxis=null};document.addEventListener("mousemove",s),document.addEventListener("mouseup",n)}_handleRotate3D(t){const e=this._transformCenter,s=this._transformStartPoints;if("x"===this._transformAxis){const n=t.y-this._transformStartPos.y,o=Math.max(-90,Math.min(90,.9*-n)),r=Math.cos(o*Math.PI/180);this.selected.points.forEach((t,n)=>{t.x=s[n].x,t.y=e.centerY+(s[n].y-e.centerY)*r})}else{const n=t.x-this._transformStartPos.x,o=Math.max(-90,Math.min(90,.9*n)),r=Math.cos(o*Math.PI/180);this.selected.points.forEach((t,n)=>{t.x=e.centerX+(s[n].x-e.centerX)*r,t.y=s[n].y})}}_applyExtrude(t,e){this.selected&&(this._originalPoints||(this._originalPoints=this.selected.points.map(t=>r({},t))),this.selected.extrude={x:t,y:e},this.render(),this.onChange&&this.onChange({type:"extrude",arrow:this.selected,value:{x:t,y:e},arrows:this.getData()}))}_applySkew(t){if(!this.selected)return;const e=this._getArrowBBox(this.selected),s=e.centerX,n=e.centerY;this._originalPoints||(this._originalPoints=this.selected.points.map(t=>r({},t)));const o=.3;this.selected.points.forEach((r,a)=>{const i=this._originalPoints[a];if("x-left"===t){const t=i.y-n,s=e.height||1,a=t/s*o*s;r.x=i.x-a,r.y=i.y}else if("x-right"===t){const t=i.y-n,s=e.height||1,a=t/s*o*s;r.x=i.x+a,r.y=i.y}else if("y-up"===t){const t=i.x-s,n=e.width||1,a=t/n*o*n;r.x=i.x,r.y=i.y-a}else if("y-down"===t){const t=i.x-s,n=e.width||1,a=t/n*o*n;r.x=i.x,r.y=i.y+a}}),this.render(),this.onChange&&this.onChange({type:"skew",arrow:this.selected,value:t,arrows:this.getData()})}_applyPerspective(t){if(!this.selected)return;const e=this._getArrowBBox(this.selected),s=e.centerX,n=e.centerY;this._originalPoints||(this._originalPoints=this.selected.points.map(t=>r({},t)));const o=.3;this.selected.points.forEach((r,a)=>{const i=this._originalPoints[a];if("top"===t){const t=1-(1-(i.y-e.minY)/(e.height||1))*o;r.x=s+(i.x-s)*t,r.y=i.y}else if("bottom"===t){const t=1-(1-(e.maxY-i.y)/(e.height||1))*o;r.x=s+(i.x-s)*t,r.y=i.y}else if("left"===t){const t=1-(1-(i.x-e.minX)/(e.width||1))*o;r.x=i.x,r.y=n+(i.y-n)*t}else if("right"===t){const t=1-(1-(e.maxX-i.x)/(e.width||1))*o;r.x=i.x,r.y=n+(i.y-n)*t}}),this.render(),this.onChange&&this.onChange({type:"perspective",arrow:this.selected,value:t,arrows:this.getData()})}_resetExtrude(){this.selected&&(this.selected.extrude=null,this._originalPoints=null,this.render(),this.onChange&&this.onChange({type:"reset",arrow:this.selected,arrows:this.getData()}))}_hitArrow(t,e){for(let s=0;s<t.points.length-1;s++)if(this._dist(e,t.points[s],t.points[s+1])<15)return!0;return!1}_dist(t,e,s){const n=s.x-e.x,o=s.y-e.y,r=((t.x-e.x)*n+(t.y-e.y)*o)/(n*n+o*o),a=Math.max(0,Math.min(1,r)),i=e.x+a*n,l=e.y+a*o;return Math.hypot(t.x-i,t.y-l)}getData(){return this.arrows.map(t=>{var e,s;return{points:t.points,curveRate:null!=(s=null!=(e=t.curveRate)?e:t.cornerRoundness)?s:0,strokeWidth:t.strokeWidth,color:t.color}})}setData(t){this.arrows=t.map(t=>{var e,s;return{points:t.points,curveRate:null!=(e=t.curveRate)?e:0,strokeWidth:null!=(s=t.strokeWidth)?s:8,color:t.color}}),this.render()}clear(){this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.render()}destroy(){this._kb&&this._kb.destroy&&this._kb.destroy(),this.container.onclick=null,this.container.onmousemove=null,this.container.onmousedown=null,this.container.onmouseup=null,this.container.ondblclick=null,this.svg&&(this.svg.remove(),this.svg=null),this._toolbar&&(this._toolbar.remove(),this._toolbar=null),this._colorPickerPopup&&(this._colorPickerPopup.remove(),this._colorPickerPopup=null),this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.mode=null,this._transformMode=null,this._transformHandle=null,this._originalPoints=null}}export{i as ArrowEditor};
|
|
1
|
+
var t=Object.defineProperty,e=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,n=(e,s,r)=>s in e?t(e,s,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[s]=r,o=(t,o)=>{for(var a in o||(o={}))s.call(o,a)&&n(t,a,o[a]);if(e)for(var a of e(o))r.call(o,a)&&n(t,a,o[a]);return t};import{Keybinding as a}from"@wbiokr/keybinding";if("undefined"!=typeof document){const t=document.createElement("style");t.textContent='\n.ae-d2-container {\n position: relative;\n width: 1000px;\n height: 600px;\n background: #fff;\n margin: auto;\n}\n\n.ae-d2-svg {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 10;\n}\n\n\n.ae-arrow-path {\n fill: none;\n stroke-linejoin: round;\n cursor: pointer;\n}\n\n.ae-arrow-path:hover {\n stroke: #00aaff;\n}\n\n.ae-transform-box {\n fill: none;\n stroke: #00aaff;\n stroke-width: 2;\n stroke-dasharray: 4;\n}\n\n.ae-transform-handle {\n fill: #fff;\n stroke: #00aaff;\n stroke-width: 2;\n cursor: pointer;\n}\n\n.ae-transform-handle:hover {\n fill: #00aaff;\n}\n\n.ae-rotate-handle {\n fill: #fff;\n stroke: #ff6600;\n stroke-width: 2;\n cursor: grab;\n}\n\n.ae-rotate-handle:hover {\n fill: #ff6600;\n}\n\n.ae-rotate-line {\n stroke: #ff6600;\n stroke-width: 1;\n stroke-dasharray: 4;\n}\n\n/* 工具条样式 */\n.ae-toolbar {\n position: fixed;\n display: none;\n flex-direction: column;\n gap: 10px;\n padding: 12px;\n background: #fff;\n border: 1px solid #ddd;\n border-radius: 8px;\n box-shadow: 0 2px 12px rgba(0,0,0,0.15);\n z-index: 10000;\n pointer-events: auto;\n min-width: 140px;\n}\n\n.ae-toolbar-drag-handle {\n cursor: grab;\n text-align: center;\n padding: 4px;\n color: #999;\n font-size: 14px;\n line-height: 1;\n user-select: none;\n border-bottom: 1px solid #eee;\n margin: -12px -12px 8px -12px;\n padding-top: 8px;\n padding-bottom: 8px;\n border-radius: 8px 8px 0 0;\n}\n\n.ae-toolbar-drag-handle:active {\n cursor: grabbing;\n}\n\n.ae-toolbar-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.ae-toolbar-row {\n display: flex;\n gap: 8px;\n}\n\n.ae-toolbar-label {\n font-size: 11px;\n color: #666;\n}\n\n.ae-scale-btn {\n flex: 1;\n padding: 6px 8px;\n background: #f0f0f0;\n color: #333;\n border: 1px solid #ccc;\n border-radius: 4px;\n cursor: pointer;\n font-size: 11px;\n transition: background 0.2s;\n}\n\n.ae-scale-btn:hover {\n background: #e0e0e0;\n}\n\n.ae-scale-btn:active {\n background: #d0d0d0;\n}\n\n.ae-toolbar input[type="color"] {\n width: 40px;\n height: 30px;\n border: 1px solid #ddd;\n border-radius: 4px;\n cursor: pointer;\n padding: 0;\n background: none;\n}\n\n.ae-toolbar input[type="range"] {\n width: 120px;\n cursor: pointer;\n}\n\n.ae-toolbar-value {\n font-size: 10px;\n color: #999;\n text-align: right;\n}\n',document.head.appendChild(t)}class i{constructor(t,e={}){var s,r,n;this.container="string"==typeof t?document.querySelector(t):t,this.svg=null,this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.mode=null,this.lastClickTime=0,this.lastClickPos=null,this._shouldBlockClick=!1,this._defaultColor="#2b8cff",this.isCtrl=e.isCtrl||!1,this.stopPropagation=e.stopPropagation||!1,this.preventDefault=e.preventDefault||!1,this.onDrawEnd=e.onDrawEnd||null,this.onRemove=e.onRemove||null,this.onChange=e.onChange||null,this._defaultColor=e.defaultColor||this._defaultColor,this._strokeWidth=e.defaultStrokeWidth||8,this._curveRate=null!=(s=e.defaultCurveRate)?s:0,this._arrowLength=null!=(r=e.defaultArrowLength)?r:22,this._arrowWidth=null!=(n=e.defaultArrowWidth)?n:20,this._transformMode=null,this._transformHandle=null,this._transformStartPos=null,this._transformStartPoints=null,this._transformCenter=null,this._transformStartAngle=null,this._rotationOffset=0,this._toolbar=null,this._lastMousePos=null,this._createSVG(),this._initKeybindings(),this._initEvents()}_createSVG(){if("undefined"!=typeof getComputedStyle){"static"===getComputedStyle(this.container).position&&(this.container.style.position="relative")}this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.setAttribute("class","ae-d2-svg"),this.container.appendChild(this.svg);const t=document.createElementNS("http://www.w3.org/2000/svg","defs");this.svg.appendChild(t);const e=document.createElementNS("http://www.w3.org/2000/svg","marker");e.setAttribute("id","ae-arrowhead"),e.setAttribute("markerWidth","10"),e.setAttribute("markerHeight","10"),e.setAttribute("refX","9"),e.setAttribute("refY","5"),e.setAttribute("orient","auto");const s=document.createElementNS("http://www.w3.org/2000/svg","polygon");s.setAttribute("points","0,0 10,5 0,10 2,5"),s.setAttribute("fill",this._defaultColor),e.appendChild(s),t.appendChild(e)}_createToolbar(){var t,e,s,r,n,a;this._toolbar&&this._toolbar.remove(),this._toolbar=document.createElement("div"),this._toolbar.className="ae-toolbar";const i=this.selected.color||this._defaultColor,l=this.selected.strokeWidth||this._strokeWidth,h=null!=(e=null!=(t=this.selected.curveRate)?t:this.selected.cornerRoundness)?e:0;this._toolbar.innerHTML=`\n <div class="ae-toolbar-drag-handle">:::</div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">颜色</span>\n <input type="color" class="ae-color-input" value="${i}" />\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">粗细</span>\n <input type="range" class="ae-stroke-input" min="1" max="60" value="${l}" />\n <span class="ae-toolbar-value">${l}px</span>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">曲线率</span>\n <input type="range" class="ae-round-input" min="0" max="1" step="0.1" value="${h}" />\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">箭头长度</span>\n <input type="range" class="ae-arrow-len-input" min="5" max="50" value="${null!=(s=this.selected.arrowLength)?s:this._arrowLength}" />\n <span class="ae-toolbar-value">${null!=(r=this.selected.arrowLength)?r:this._arrowLength}px</span>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">箭头宽度</span>\n <input type="range" class="ae-arrow-width-input" min="5" max="50" value="${null!=(n=this.selected.arrowWidth)?n:this._arrowWidth}" />\n <span class="ae-toolbar-value">${null!=(a=this.selected.arrowWidth)?a:this._arrowWidth}px</span>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">缩放</span>\n <div class="ae-toolbar-row">\n <button class="ae-scale-btn" data-axis="x">X 缩放</button>\n <button class="ae-scale-btn" data-axis="y">Y 缩放</button>\n </div>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">3D 旋转</span>\n <div class="ae-toolbar-row">\n <button class="ae-scale-btn" data-axis="x-rotate">X 轴</button>\n <button class="ae-scale-btn" data-axis="y-rotate">Y 轴</button>\n </div>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">2.5D 挤出</span>\n <div class="ae-toolbar-row">\n <button class="ae-scale-btn" data-mode="extrude-up">上挤出</button>\n <button class="ae-scale-btn" data-mode="extrude-down">下挤出</button>\n </div>\n <div class="ae-toolbar-row" style="margin-top:4px;">\n <button class="ae-scale-btn" data-mode="extrude-left">左挤出</button>\n <button class="ae-scale-btn" data-mode="extrude-right">右挤出</button>\n </div>\n <div class="ae-toolbar-row" style="margin-top:4px;">\n <button class="ae-scale-btn" data-mode="reset">重置</button>\n </div>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">2.5D 透视</span>\n <div class="ae-toolbar-row">\n <button class="ae-scale-btn" data-perspective="top">上透视</button>\n <button class="ae-scale-btn" data-perspective="bottom">下透视</button>\n </div>\n <div class="ae-toolbar-row" style="margin-top:4px;">\n <button class="ae-scale-btn" data-perspective="left">左透视</button>\n <button class="ae-scale-btn" data-perspective="right">右透视</button>\n </div>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">倾斜</span>\n <div class="ae-toolbar-row">\n <button class="ae-scale-btn" data-skew="x-left">左倾斜</button>\n <button class="ae-scale-btn" data-skew="x-right">右倾斜</button>\n </div>\n <div class="ae-toolbar-row" style="margin-top:4px;">\n <button class="ae-scale-btn" data-skew="y-up">上倾斜</button>\n <button class="ae-scale-btn" data-skew="y-down">下倾斜</button>\n </div>\n <div class="ae-toolbar-row" style="margin-top:4px;">\n <button class="ae-scale-btn" data-mode="reset">重置</button>\n </div>\n </div>\n `;this._toolbar.querySelector(".ae-color-input").addEventListener("input",t=>{this.selected&&(this.selected.color=t.target.value,this._defaultColor=t.target.value,this._updateMarkerColor(t.target.value),this.render(),this.onChange&&this.onChange({type:"color",arrow:this.selected,value:t.target.value,arrows:this.getData()}))});const c=this._toolbar.querySelector(".ae-stroke-input"),d=this._toolbar.querySelector(".ae-stroke-input + .ae-toolbar-value");c.addEventListener("input",t=>{this.selected&&(this.selected.strokeWidth=parseInt(t.target.value),d.textContent=t.target.value+"px",this.render(),this.onChange&&this.onChange({type:"strokeWidth",arrow:this.selected,value:parseInt(t.target.value),arrows:this.getData()}))});this._toolbar.querySelector(".ae-round-input").addEventListener("input",t=>{this.selected&&(this.selected.curveRate=parseFloat(t.target.value),this.render(),this.onChange&&this.onChange({type:"curveRate",arrow:this.selected,value:parseFloat(t.target.value),arrows:this.getData()}))});const u=this._toolbar.querySelector(".ae-arrow-len-input"),p=this._toolbar.querySelector(".ae-arrow-len-input + .ae-toolbar-value");u.addEventListener("input",t=>{this.selected&&(this.selected.arrowLength=parseInt(t.target.value),p.textContent=t.target.value+"px",this.render(),this.onChange&&this.onChange({type:"arrowLength",arrow:this.selected,value:parseInt(t.target.value),arrows:this.getData()}))});const g=this._toolbar.querySelector(".ae-arrow-width-input"),b=this._toolbar.querySelector(".ae-arrow-width-input + .ae-toolbar-value");g.addEventListener("input",t=>{this.selected&&(this.selected.arrowWidth=parseInt(t.target.value),b.textContent=t.target.value+"px",this.render(),this.onChange&&this.onChange({type:"arrowWidth",arrow:this.selected,value:parseInt(t.target.value),arrows:this.getData()}))});this._toolbar.querySelectorAll(".ae-scale-btn[data-axis]").forEach(t=>{t.addEventListener("click",t=>{t.stopPropagation();const e=t.target.dataset.axis;if("x-rotate"===e)return void this._startRotate3D("x");if("y-rotate"===e)return void this._startRotate3D("y");this._transformMode="scale",this._transformAxis=e,this._transformCenter=this._getArrowBBox(this.selected),this._transformStartPoints=this.selected.points.map(t=>o({},t));const s=this._getArrowBBox(this.selected);this._transformStartPos="x"===e?{x:s.maxX+10,y:s.centerY}:{x:s.centerX,y:s.maxY+10};const r=t=>{const s=this._mousePos(t);"x"===e?this._handleScaleX(s):this._handleScaleY(s),this.render()},n=()=>{document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",n),this.onChange&&this.onChange({type:"scale",arrow:this.selected,arrows:this.getData()}),this._transformMode=null,this._transformAxis=null};document.addEventListener("mousemove",r),document.addEventListener("mouseup",n)})});this._toolbar.querySelectorAll(".ae-scale-btn[data-mode]").forEach(t=>{t.addEventListener("click",t=>{t.stopPropagation();const e=t.target.dataset.mode;"extrude-up"===e?this._applyExtrude(0,-15):"extrude-down"===e?this._applyExtrude(0,15):"extrude-left"===e?this._applyExtrude(-15,0):"extrude-right"===e?this._applyExtrude(15,0):"reset"===e&&this._resetExtrude()})});this._toolbar.querySelectorAll(".ae-scale-btn[data-perspective]").forEach(t=>{t.addEventListener("click",t=>{t.stopPropagation();const e=t.target.dataset.perspective;"top"===e?this._applyPerspective("top"):"bottom"===e?this._applyPerspective("bottom"):"left"===e?this._applyPerspective("left"):"right"===e&&this._applyPerspective("right")})});this._toolbar.querySelectorAll(".ae-scale-btn[data-skew]").forEach(t=>{t.addEventListener("click",t=>{t.stopPropagation();const e=t.target.dataset.skew;"x-left"===e?this._applySkew("x-left"):"x-right"===e?this._applySkew("x-right"):"y-up"===e?this._applySkew("y-up"):"y-down"===e&&this._applySkew("y-down")})});const m=this._toolbar.querySelector(".ae-toolbar-drag-handle");this._setupToolbarDrag(m),this._toolbar.addEventListener("mousedown",t=>{t.stopPropagation()}),this._toolbar.addEventListener("mouseup",t=>{t.stopPropagation()}),document.body.appendChild(this._toolbar)}_setupToolbarDrag(t){let e=!1,s={x:0,y:0};t.addEventListener("mousedown",t=>{e=!0,this._toolbarDragging=!0;const r=this._toolbar.getBoundingClientRect();s.x=t.clientX-r.left,s.y=t.clientY-r.top,t.preventDefault(),t.stopPropagation();const n=t=>{if(!e)return;let r=t.clientX-s.x,n=t.clientY-s.y;this._toolbar.style.left=r+"px",this._toolbar.style.top=n+"px"},o=t=>{e=!1,this._toolbarDragging=!1,document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o),this._toolbar.removeEventListener("mouseup",o),t.preventDefault(),t.stopPropagation()};document.addEventListener("mousemove",n),document.addEventListener("mouseup",o),this._toolbar.addEventListener("mouseup",o)})}_showToolbar(){var t,e,s,r;if(this.selected){this._toolbar||this._createToolbar(),this._toolbar.style.display="flex";const n=this.selected.color||this._defaultColor,o=this.selected.strokeWidth||this._strokeWidth,a=null!=(e=null!=(t=this.selected.curveRate)?t:this.selected.cornerRoundness)?e:0,i=null!=(s=this.selected.arrowLength)?s:this._arrowLength,l=null!=(r=this.selected.arrowWidth)?r:this._arrowWidth,h=this._toolbar.querySelector(".ae-color-input"),c=this._toolbar.querySelector(".ae-stroke-input"),d=this._toolbar.querySelector(".ae-stroke-input + .ae-toolbar-value"),u=this._toolbar.querySelector(".ae-round-input"),p=this._toolbar.querySelector(".ae-arrow-len-input"),g=this._toolbar.querySelector(".ae-arrow-len-input + .ae-toolbar-value"),b=this._toolbar.querySelector(".ae-arrow-width-input"),m=this._toolbar.querySelector(".ae-arrow-width-input + .ae-toolbar-value");h&&(h.value=n),c&&(c.value=o,d.textContent=o+"px"),u&&(u.value=a),p&&(p.value=i,g.textContent=i+"px"),b&&(b.value=l,m.textContent=l+"px");const _=this.container.getBoundingClientRect(),w=this._getArrowBBox(this.selected),f=this._toolbar.offsetWidth||150,x=this._toolbar.offsetHeight||120;let v=_.left+w.maxX+20;v+f>window.innerWidth-10&&(v=_.left+w.minX-f-20);let y=_.top+w.centerY-x/2;y<10&&(y=10),y+x>window.innerHeight-10&&(y=window.innerHeight-x-10),this._toolbar.style.left=v+"px",this._toolbar.style.top=y+"px"}}_hideToolbar(){this._toolbar&&(this._toolbar.style.display="none")}_updateMarkerColor(t){const e=this.svg.querySelector("#ae-arrowhead polygon");e&&e.setAttribute("fill",t)}_initKeybindings(){this._kb=new a("arrow-editor-"+Math.random(),this.container),this._kb.on("enter",()=>{this._handleEnter()}),this._kb.on("esc",()=>{this._handleEsc()}),this._kb.on("delete",()=>{this._handleDelete()}),this._kb.on("backspace",()=>{this._handleDelete()}),this._kb.on("space",()=>{this._handleSpace()}),this._kb.on("arrowup",()=>{this._handleArrowKey(0,-1)}),this._kb.on("arrowdown",()=>{this._handleArrowKey(0,1)}),this._kb.on("arrowleft",()=>{this._handleArrowKey(-1,0)}),this._kb.on("arrowright",()=>{this._handleArrowKey(1,0)})}_handleSpace(){this.drawing&&this.current&&this._lastMousePos&&(this.current.points.push(o({},this._lastMousePos)),this.render())}_handleArrowKey(t,e){if(!this.selected)return;this.selected.points.forEach(s=>{s.x+=1*t,s.y+=1*e}),this.render(),this.onChange&&this.onChange({type:"move",arrow:this.selected,arrows:this.getData()})}_initEvents(){this.container.onclick=t=>{if(this._toolbar&&(t.target===this._toolbar||this._toolbar.contains(t.target)))return;this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation();const e=this._mousePos(t);this._handleClick(e,t)},this.container.onmousemove=t=>{this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation();const e=this._mousePos(t);this._lastMousePos=e,this._handleMouseMove(t,e)},this.container.onmousedown=t=>{if((!this._toolbar||t.target!==this._toolbar&&!this._toolbar.contains(t.target))&&(this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation(),this.selected)){const e=t.target.getAttribute("data-handle");if(e){this._transformMode="scaleX"===e||"scaleY"===e?"scale":e,this._transformHandle=e,this._transformAxis="scaleX"===e?"x":"scaleY"===e?"y":null;const s=this._mousePos(t);if(this._transformStartPos=s,this._transformStartPoints=this.selected.points.map(t=>({x:t.x,y:t.y})),this._transformCenter=this._getArrowBBox(this.selected),"rotate"===e){const t=this._transformCenter,e=s.x-t.centerX,r=s.y-t.centerY;this._transformStartAngle=Math.atan2(r,e),this._rotationOffset=0}return void t.stopPropagation()}this.mode="move"}},this.container.onmouseup=t=>{this._transformMode&&this.selected&&this.onChange&&this.onChange({type:this._transformMode,arrow:this.selected,arrows:this.getData()}),this.mode=null,this._transformMode=null,this._transformHandle=null,this._transformAxis=null}}_mousePos(t){const e=this.container.getBoundingClientRect();return{x:t.clientX-e.left,y:t.clientY-e.top}}_generatePath(t,e=0){if(t.length<2)return"";if(0===e){let e=`M ${t[0].x} ${t[0].y}`;for(let s=1;s<t.length;s++)e+=` L ${t[s].x} ${t[s].y}`;return e}let s=`M ${t[0].x} ${t[0].y}`;for(let r=0;r<t.length-1;r++){const n=t[r],o=t[r+1],a=o.x-n.x,i=o.y-n.y,l=Math.hypot(a,i);if(0===l)continue;let h=a,c=i;if(r>0){const e=t[r-1];h=n.x-e.x,c=n.y-e.y}let d=a,u=i;if(r<t.length-2){const e=t[r+2];d=e.x-o.x,u=e.y-o.y}const p=Math.hypot(h,c)||1,g=Math.hypot(d,u)||1,b=h/p,m=c/p,_=d/g,w=u/g,f=l*e*.3;s+=` C ${n.x+b*f} ${n.y+m*f} ${o.x-_*f} ${o.y-w*f} ${o.x} ${o.y}`}return s}_generateArrowHead(t,e=8,s=22,r=20){if(t.length<2)return"";const n=t[t.length-1];let o=t[t.length-2];if(t.length>=3){Math.hypot(n.x-o.x,n.y-o.y)<5&&(o=t[t.length-3])}const a=n.x-o.x,i=n.y-o.y,l=Math.hypot(a,i);if(l<1)return"";const h=a/l,c=i/l,d=e/8,u=s*d,p=r*d,g=n.x,b=n.y,m=h*(u/2),_=c*(u/2),w=g+m-h*u,f=b+_-c*u,x=-c;return`M ${g+m} ${b+_} L ${w+x*p} ${f+h*p} L ${w-x*p} ${f-h*p} Z`}_createArrowGroup(t,e){var s,r,n,o;const a=document.createElementNS("http://www.w3.org/2000/svg","g");a.setAttribute("data-index",e);const i=t.color||this._defaultColor,l=t.strokeWidth||this._strokeWidth,h=null!=(r=null!=(s=t.curveRate)?s:t.cornerRoundness)?r:0,c=null!=(n=t.arrowLength)?n:this._arrowLength,d=null!=(o=t.arrowWidth)?o:this._arrowWidth,u=t.extrude||{x:0,y:0};if(Math.max(Math.abs(u.x),Math.abs(u.y))>0){const e=u.x>0?1:-1,s=u.y>0?1:-1,r=Math.max(Math.abs(u.x),Math.abs(u.y));for(let n=1;n<=r;n++){const r=e*n,o=s*n,i=document.createElementNS("http://www.w3.org/2000/svg","path");i.setAttribute("class","ae-arrow-path"),i.style.stroke="#ccc",i.style.strokeWidth=l+"px",i.style.opacity="0.15",i.setAttribute("d",this._generatePath(t.points.map(t=>({x:t.x+r,y:t.y+o})),h)),a.appendChild(i);const u=document.createElementNS("http://www.w3.org/2000/svg","path");u.setAttribute("fill","#ccc"),u.setAttribute("fill-opacity","0.15"),u.setAttribute("d",this._generateArrowHead(t.points.map(t=>({x:t.x+r,y:t.y+o})),l,c,d)),a.appendChild(u)}}const p=document.createElementNS("http://www.w3.org/2000/svg","path");p.setAttribute("class","ae-arrow-path"),p.style.stroke=i,p.style.strokeWidth=l+"px",p.setAttribute("d",this._generatePath(t.points,h)),a.appendChild(p);const g=document.createElementNS("http://www.w3.org/2000/svg","path");if(g.setAttribute("fill",i),g.setAttribute("d",this._generateArrowHead(t.points,l,c,d)),a.appendChild(g),t===this.selected){const e=this._getArrowBBox(t),s=document.createElementNS("http://www.w3.org/2000/svg","rect");s.setAttribute("class","ae-transform-box"),s.setAttribute("x",e.minX-10),s.setAttribute("y",e.minY-10),s.setAttribute("width",e.width+20),s.setAttribute("height",e.height+20),a.appendChild(s);const r=document.createElementNS("http://www.w3.org/2000/svg","circle");r.setAttribute("class","ae-transform-handle"),r.setAttribute("cx",e.maxX+10),r.setAttribute("cy",e.maxY+10),r.setAttribute("r",6),r.setAttribute("data-handle","scale"),a.appendChild(r);const n=document.createElementNS("http://www.w3.org/2000/svg","circle");n.setAttribute("class","ae-transform-handle"),n.setAttribute("cx",e.maxX+10),n.setAttribute("cy",e.centerY),n.setAttribute("r",6),n.setAttribute("data-handle","scaleX"),a.appendChild(n);const o=document.createElementNS("http://www.w3.org/2000/svg","circle");o.setAttribute("class","ae-transform-handle"),o.setAttribute("cx",e.centerX),o.setAttribute("cy",e.maxY+10),o.setAttribute("r",6),o.setAttribute("data-handle","scaleY"),a.appendChild(o);const i=e.minY-30,l=e.centerX,h=document.createElementNS("http://www.w3.org/2000/svg","line");h.setAttribute("class","ae-rotate-line"),h.setAttribute("x1",e.centerX),h.setAttribute("y1",e.minY-10),h.setAttribute("x2",l),h.setAttribute("y2",i),a.appendChild(h);const c=document.createElementNS("http://www.w3.org/2000/svg","circle");c.setAttribute("class","ae-rotate-handle"),c.setAttribute("cx",l),c.setAttribute("cy",i),c.setAttribute("r",8),c.setAttribute("data-handle","rotate"),a.appendChild(c)}return a}render(){if(this.svg.querySelectorAll("g").forEach(t=>t.remove()),this.arrows.forEach((t,e)=>{const s=this._createArrowGroup(t,e);this.svg.appendChild(s)}),this.current){const t=this._createArrowGroup(this.current,this.arrows.length);this.svg.appendChild(t)}}_isDoubleClick(t){const e=Date.now(),s=e-this.lastClickTime;return this.lastClickTime=e,s<300&&this.lastClickPos&&Math.hypot(t.x-this.lastClickPos.x,t.y-this.lastClickPos.y)<10?(this.lastClickPos=null,!0):(this.lastClickPos=t,!1)}_handleClick(t,e){if(!this.isCtrl||e.ctrlKey)if(this._shouldBlockClick)this._shouldBlockClick=!1;else if(this._isDoubleClick(t)){if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const t=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:t,arrows:this.getData()})}}else{if(this.selected){for(const e of this.arrows)if(this._hitArrow(e,t))return void this.render();return this.selected=null,this._hideToolbar(),void this.render()}for(const e of this.arrows)if(this._hitArrow(e,t))return this.selected=e,this._showToolbar(),void this.render();this.drawing?this.current.points.push(t):(this.drawing=!0,this.current={points:[t,t],color:this._defaultColor},this.svg.classList.add("ae-d2-svg-fixed")),this.render()}}_handleEnter(){if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const t=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:t,arrows:this.getData()})}}_handleEsc(){this.drawing&&(this.drawing=!1,this.current=null,this.svg.classList.remove("ae-d2-svg-fixed")),this.selected&&(this.selected=null),this._hideColorPicker(),this._hideToolbar(),this.render()}_handleDelete(){if(this.selected){const t=this.selected,e=this.arrows.indexOf(this.selected);e>-1&&this.arrows.splice(e,1),this.selected=null,this._hideToolbar(),this.render(),this.onRemove&&this.onRemove({arrow:t,arrows:this.getData()})}}_showColorPicker(t){if(this._showingColorPicker)return void this._hideColorPicker();this._showingColorPicker=!0;const e=document.createElement("div");e.className="ae-color-picker-popup";const s=document.createElement("span");s.textContent="选择颜色",s.style.cssText="font-size: 12px; color: #666;";const r=document.createElement("input");r.type="color",r.value=this.selected.color||this._defaultColor,r.showPicker(),e.appendChild(s),e.appendChild(r);const n=this.container.getBoundingClientRect(),o=this._getArrowBBox(this.selected),a=n.left+o.minX-50,i=n.top+o.maxY+15;e.style.left=a+"px",e.style.top=i+"px",r.addEventListener("input",t=>{this.selected.color=t.target.value,this._defaultColor=t.target.value,this.render(),this.onChange&&this.onChange({type:"color",arrow:this.selected,value:t.target.value,arrows:this.getData()})});const l=t=>{e.contains(t.target)||(this._hideColorPicker(),document.removeEventListener("click",l))};document.body.appendChild(e),this._colorPickerPopup=e,document.addEventListener("click",l)}_hideColorPicker(){this._colorPickerPopup&&(this._colorPickerPopup.remove(),this._colorPickerPopup=null),this._showingColorPicker=!1}deleteSelected(){this.selected&&(this.arrows=this.arrows.filter(t=>t!==this.selected),this.selected=null,this.render())}_handleMouseMove(t,e){if(!this._toolbarDragging&&(!this._toolbar||t.target!==this._toolbar&&!this._toolbar.contains(t.target)))if(!this.isCtrl||t.ctrlKey){if(this.drawing&&(this.current.points[this.current.points.length-1]=e,this.render()),this._transformMode&&this.selected)return"rotate"===this._transformMode?this._handleRotate(e):"scale"===this._transformMode?"x"===this._transformAxis?this._handleScaleX(e):"y"===this._transformAxis?this._handleScaleY(e):this._handleScale(e):"rotate3d"===this._transformMode&&this._handleRotate3D(e),void this.render();if(this.selected&&"move"===this.mode){const e=t.movementX,s=t.movementY;0===e&&0===s||(this._shouldBlockClick=!0),this.selected.points.forEach(t=>{t.x+=e,t.y+=s}),this.render()}}else if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const t=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:t,arrows:this.getData()})}}_getArrowBBox(t){const e=t.points;let s=1/0,r=1/0,n=-1/0,o=-1/0;for(const a of e)s=Math.min(s,a.x),r=Math.min(r,a.y),n=Math.max(n,a.x),o=Math.max(o,a.y);return{minX:s,minY:r,maxX:n,maxY:o,width:n-s,height:o-r,centerX:(s+n)/2,centerY:(r+o)/2}}_handleRotate(t){const e=this._transformCenter,s=e.centerX,r=e.centerY,n=Math.atan2(t.y-r,t.x-s)-Math.atan2(this._transformStartPos.y-r,this._transformStartPos.x-s),o=Math.cos(n),a=Math.sin(n);this.selected.points.forEach((t,e)=>{const n=this._transformStartPoints[e].x-s,i=this._transformStartPoints[e].y-r;t.x=s+n*o-i*a,t.y=r+n*a+i*o})}_handleScale(t){const e=this._transformCenter,s=e.centerX,r=e.centerY,n=this._transformStartPoints,o=this._transformStartPos,a=t.x-s,i=t.y-r,l=o.x-s,h=o.y-r,c=Math.hypot(a,i)/Math.hypot(l,h);this.selected.points.forEach((t,e)=>{t.x=s+(n[e].x-s)*c,t.y=r+(n[e].y-r)*c})}_handleScaleX(t){const e=this._transformCenter.centerX,s=this._transformStartPoints,r=this._transformStartPos,n=t.x-e,o=r.x-e,a=0!==o?n/o:1;this.selected.points.forEach((t,r)=>{t.x=e+(s[r].x-e)*a,t.y=s[r].y})}_handleScaleY(t){const e=this._transformCenter.centerY,s=this._transformStartPoints,r=this._transformStartPos,n=t.y-e,o=r.y-e,a=0!==o?n/o:1;this.selected.points.forEach((t,r)=>{t.x=s[r].x,t.y=e+(s[r].y-e)*a})}_startRotate3D(t){if(!this.selected)return;this._transformMode="rotate3d",this._transformAxis=t,this._transformCenter=this._getArrowBBox(this.selected),this._transformStartPoints=this.selected.points.map(t=>o({},t)),this._rotation3DStartAngle=0;const e=this._getArrowBBox(this.selected);this._transformStartPos="x"===t?{x:e.maxX+50,y:e.centerY}:{x:e.centerX,y:e.maxY+50};const s=t=>{const e=this._mousePos(t);this._handleRotate3D(e),this.render()},r=()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",r),this.onChange&&this.onChange({type:"rotate3d",arrow:this.selected,value:t,arrows:this.getData()}),this._transformMode=null,this._transformAxis=null};document.addEventListener("mousemove",s),document.addEventListener("mouseup",r)}_handleRotate3D(t){const e=this._transformCenter,s=this._transformStartPoints;if("x"===this._transformAxis){const r=t.y-this._transformStartPos.y,n=Math.max(-90,Math.min(90,.9*-r)),o=Math.cos(n*Math.PI/180);this.selected.points.forEach((t,r)=>{t.x=s[r].x,t.y=e.centerY+(s[r].y-e.centerY)*o})}else{const r=t.x-this._transformStartPos.x,n=Math.max(-90,Math.min(90,.9*r)),o=Math.cos(n*Math.PI/180);this.selected.points.forEach((t,r)=>{t.x=e.centerX+(s[r].x-e.centerX)*o,t.y=s[r].y})}}_applyExtrude(t,e){this.selected&&(this._originalPoints||(this._originalPoints=this.selected.points.map(t=>o({},t))),this.selected.extrude={x:t,y:e},this.render(),this.onChange&&this.onChange({type:"extrude",arrow:this.selected,value:{x:t,y:e},arrows:this.getData()}))}_applySkew(t){if(!this.selected)return;const e=this._getArrowBBox(this.selected),s=e.centerX,r=e.centerY;this._originalPoints||(this._originalPoints=this.selected.points.map(t=>o({},t)));const n=.3;this.selected.points.forEach((o,a)=>{const i=this._originalPoints[a];if("x-left"===t){const t=i.y-r,s=e.height||1,a=t/s*n*s;o.x=i.x-a,o.y=i.y}else if("x-right"===t){const t=i.y-r,s=e.height||1,a=t/s*n*s;o.x=i.x+a,o.y=i.y}else if("y-up"===t){const t=i.x-s,r=e.width||1,a=t/r*n*r;o.x=i.x,o.y=i.y-a}else if("y-down"===t){const t=i.x-s,r=e.width||1,a=t/r*n*r;o.x=i.x,o.y=i.y+a}}),this.render(),this.onChange&&this.onChange({type:"skew",arrow:this.selected,value:t,arrows:this.getData()})}_applyPerspective(t){if(!this.selected)return;const e=this._getArrowBBox(this.selected),s=e.centerX,r=e.centerY;this._originalPoints||(this._originalPoints=this.selected.points.map(t=>o({},t)));const n=.3;this.selected.points.forEach((o,a)=>{const i=this._originalPoints[a];if("top"===t){const t=1-(1-(i.y-e.minY)/(e.height||1))*n;o.x=s+(i.x-s)*t,o.y=i.y}else if("bottom"===t){const t=1-(1-(e.maxY-i.y)/(e.height||1))*n;o.x=s+(i.x-s)*t,o.y=i.y}else if("left"===t){const t=1-(1-(i.x-e.minX)/(e.width||1))*n;o.x=i.x,o.y=r+(i.y-r)*t}else if("right"===t){const t=1-(1-(e.maxX-i.x)/(e.width||1))*n;o.x=i.x,o.y=r+(i.y-r)*t}}),this.render(),this.onChange&&this.onChange({type:"perspective",arrow:this.selected,value:t,arrows:this.getData()})}_resetExtrude(){this.selected&&(this.selected.extrude=null,this._originalPoints=null,this.render(),this.onChange&&this.onChange({type:"reset",arrow:this.selected,arrows:this.getData()}))}_hitArrow(t,e){for(let s=0;s<t.points.length-1;s++)if(this._dist(e,t.points[s],t.points[s+1])<15)return!0;return!1}_dist(t,e,s){const r=s.x-e.x,n=s.y-e.y,o=((t.x-e.x)*r+(t.y-e.y)*n)/(r*r+n*n),a=Math.max(0,Math.min(1,o)),i=e.x+a*r,l=e.y+a*n;return Math.hypot(t.x-i,t.y-l)}getData(){return this.arrows.map(t=>{var e,s,r,n,o;return{points:t.points,curveRate:null!=(s=null!=(e=t.curveRate)?e:t.cornerRoundness)?s:0,strokeWidth:null!=(r=t.strokeWidth)?r:this._strokeWidth,arrowLength:null!=(n=t.arrowLength)?n:this._arrowLength,arrowWidth:null!=(o=t.arrowWidth)?o:this._arrowWidth,color:t.color}})}setData(t){this.arrows=t.map(t=>{var e,s,r,n,o;return{points:t.points,curveRate:null!=(s=null!=(e=t.curveRate)?e:this._curveRate)?s:0,strokeWidth:null!=(r=t.strokeWidth)?r:this._strokeWidth,arrowLength:null!=(n=t.arrowLength)?n:this._arrowLength,arrowWidth:null!=(o=t.arrowWidth)?o:this._arrowWidth,color:t.color}}),this.render()}clear(){this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.render()}destroy(){this._kb&&this._kb.destroy&&this._kb.destroy(),this.container.onclick=null,this.container.onmousemove=null,this.container.onmousedown=null,this.container.onmouseup=null,this.container.ondblclick=null,this.svg&&(this.svg.remove(),this.svg=null),this._toolbar&&(this._toolbar.remove(),this._toolbar=null),this._colorPickerPopup&&(this._colorPickerPopup.remove(),this._colorPickerPopup=null),this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.mode=null,this._transformMode=null,this._transformHandle=null,this._originalPoints=null}}export{i as ArrowEditor};
|
|
2
2
|
//# sourceMappingURL=bundle.esm.js.map
|