svgedit/dist/editor/extensions/ext-polystar/ext-polystar.js

Powerful SVG-Editor for your browser

/**
 * @file ext-polystar.js
 *
 *
 * @copyright 2010 CloudCanvas, Inc. All rights reserved
 * @copyright 2021 Optimistik SAS, Inc. All rights reserved
 * @license MIT
 *
 */
const t="polystar",loadExtensionTranslation=async function(e){let l;const s=e.configObj.pref("lang");try{l=await function __variableDynamicImportRuntime0__(t){switch(t){case"./locale/en.js":return Promise.resolve().then((function(){return o}));case"./locale/fr.js":return Promise.resolve().then((function(){return n}));case"./locale/zh-CN.js":return Promise.resolve().then((function(){return i}));default:return new Promise((function(e,o){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(o.bind(null,new Error("Unknown variable dynamic import: "+t)))}))}}("./locale/".concat(s,".js"))}catch(e){console.warn("Missing translation (".concat(s,") for ").concat(t," - using 'en'")),l=await Promise.resolve().then((function(){return o}))}e.i18next.addResourceBundle(s,t,l.default)};var e={name:t,async init(e){const o=this,{ChangeElementCommand:n}=e,addToHistory=function(t){i.undoMgr.addCommandToHistory(t)},{svgCanvas:i}=o,{$id:l}=i;let s,a,r;await loadExtensionTranslation(o);const showPanel=(t,e)=>{t?l("".concat(e,"_panel")).style.removeProperty("display"):l("".concat(e,"_panel")).style.display="none"},setAttr=(t,e)=>{i.changeSelectedAttribute(t,e),i.call("changed",s)},cot=t=>1/Math.tan(t),sec=t=>1/Math.cos(t);return{name:o.i18next.t("".concat(t,":name")),callback(){const e="".concat(t,":title"),o="".concat(t,":buttons.0.title"),a="".concat(t,":buttons.1.title"),r='\n            <se-flyingbutton id="tools_polygon" title="'.concat(e,'">\n              <se-button id="tool_star" title="').concat(o,'" src="star.svg">\n              </se-button>\n              <se-button id="tool_polygon" title="').concat(a,'" src="polygon.svg">\n              </se-button>\n            </se-flyingbutton>\n          ');i.insertChildAtIndex(l("tools_left"),r,10),l("tool_star").addEventListener("click",(()=>{this.leftPanel.updateLeftPanel("tool_star")&&(i.setMode("star"),showPanel(!0,"star"),showPanel(!1,"polygon"))})),l("tool_polygon").addEventListener("click",(()=>{this.leftPanel.updateLeftPanel("tool_polygon")&&(i.setMode("polygon"),showPanel(!0,"polygon"),showPanel(!1,"star"))}));const c="".concat(t,":contextTools.0.label"),u="".concat(t,":contextTools.0.title"),d="".concat(t,":contextTools.1.label"),g="".concat(t,":contextTools.1.title"),p="".concat(t,":contextTools.2.label"),b="".concat(t,":contextTools.2.title"),h="".concat(t,":contextTools.3.label"),m="".concat(t,":contextTools.3.title"),f=document.createElement("template");f.innerHTML='\n          <div id="star_panel">\n            <se-spin-input id="starNumPoints" label="'.concat(c,'" min=1 step=1 value=5 title="').concat(u,'">\n            </se-spin-input>\n            <se-spin-input id="RadiusMultiplier" label="').concat(d,'" min=1 step=2.5 value=3 title="').concat(g,'">\n            </se-spin-input>\n            <se-spin-input id="radialShift" min=0 step=1 value=0 label="').concat(p,'" title="').concat(b,'">\n            </se-spin-input>\n          </div>\n          <div id="polygon_panel">\n            <se-spin-input size="3" id="polySides" min=1 step=1 value=5 label="').concat(h,'" title="').concat(m,'">\n            </se-spin-input>\n          </div>\n        '),l("tools_top").appendChild(f.content.cloneNode(!0)),showPanel(!1,"star"),showPanel(!1,"polygon"),l("starNumPoints").addEventListener("change",(t=>{setAttr("point",t.target.value);const e=t.target.value;let o=s.length;for(;o--;){const t=s[o];if(t.hasAttribute("r")){const o=t.getAttribute("point"),i=t.getAttribute("points"),l=t.getAttribute("radialshift");let s=0,a=0;if(t.points){const r=t.points,c=r.numberOfItems;for(let t=0;t<c;++t){const e=r.getItem(t);s+=parseFloat(e.x),a+=parseFloat(e.y)}const u=s/c,d=a/c,g=Number(t.getAttribute("r")),p=g/t.getAttribute("starRadiusMultiplier");let b="";for(let t=0;e>=t;t++){let o=2*Math.PI*(t/e);o-=Math.PI/2;let n=g*Math.cos(o)+u,i=g*Math.sin(o)+d;b+=n+","+i+" ",isNaN(p)||(o=2*Math.PI*(t/e)+Math.PI/e,o-=Math.PI/2,o+=l,n=p*Math.cos(o)+u,i=p*Math.sin(o)+d,b+=n+","+i+" ")}t.setAttribute("points",b),addToHistory(new n(t,{point:o,points:i}))}}}})),l("RadiusMultiplier").addEventListener("change",(t=>{setAttr("starRadiusMultiplier",t.target.value)})),l("radialShift").addEventListener("change",(t=>{setAttr("radialshift",t.target.value)})),l("polySides").addEventListener("change",(t=>{setAttr("sides",t.target.value);const e=t.target.value;let o=s.length;for(;o--;){const t=s[o];if(t.hasAttribute("edge")){const o=t.getAttribute("sides"),i=t.getAttribute("points");let l=0,s=0;if(t.points){const a=t.points,r=a.numberOfItems;for(let t=0;t<r;++t){const e=a.getItem(t);l+=parseFloat(e.x),s+=parseFloat(e.y)}const c=l/r,u=s/r,d=t.getAttribute("edge")/2*cot(Math.PI/e)*sec(Math.PI/e);let g="";for(let t=0;e>=t;t++){const o=2*Math.PI*t/e;g+=d*Math.cos(o)+c+","+(d*Math.sin(o)+u)+" "}t.setAttribute("points",g),addToHistory(new n(t,{sides:o,points:i}))}}}}))},mouseDown(t){if("star"===i.getMode()){const e=i.getColor("fill"),o=i.getColor("stroke"),n=i.getStrokeWidth();return a=!0,r=i.addSVGElementFromJson({element:"polygon",attr:{cx:t.start_x,cy:t.start_y,id:i.getNextId(),shape:"star",point:l("starNumPoints").value,r:0,radialshift:l("radialShift").value,r2:0,orient:"point",fill:e,strokecolor:o,strokeWidth:n}}),{started:!0}}if("polygon"===i.getMode()){const e=i.getColor("fill"),o=i.getColor("stroke"),n=i.getStrokeWidth();return a=!0,r=i.addSVGElementFromJson({element:"polygon",attr:{cx:t.start_x,cy:t.start_y,id:i.getNextId(),shape:"regularPoly",sides:l("polySides").value,orient:"x",edge:0,fill:e,strokecolor:o,strokeWidth:n}}),{started:!0}}},mouseMove(t){if(a){if("star"===i.getMode()){const e=Number(r.getAttribute("cx")),o=Number(r.getAttribute("cy")),n=Number(r.getAttribute("point")),i=r.getAttribute("orient"),l=r.getAttribute("fill"),s=r.getAttribute("strokecolor"),a=Number(r.getAttribute("strokeWidth")),c=Number(r.getAttribute("radialshift"));let u=t.mouse_x,d=t.mouse_y;const g=Math.sqrt((u-e)*(u-e)+(d-o)*(d-o))/1.5,p=document.getElementById("RadiusMultiplier").value,b=g/p;r.setAttribute("r",g),r.setAttribute("r2",b),r.setAttribute("starRadiusMultiplier",p);let h="";for(let t=0;n>=t;t++){let l=2*Math.PI*(t/n);"point"===i?l-=Math.PI/2:"edge"===i&&(l=l+Math.PI/n-Math.PI/2),u=g*Math.cos(l)+e,d=g*Math.sin(l)+o,h+=u+","+d+" ",isNaN(b)||(l=2*Math.PI*(t/n)+Math.PI/n,"point"===i?l-=Math.PI/2:"edge"===i&&(l=l+Math.PI/n-Math.PI/2),l+=c,u=b*Math.cos(l)+e,d=b*Math.sin(l)+o,h+=u+","+d+" ")}return r.setAttribute("points",h),r.setAttribute("fill",l),r.setAttribute("stroke",s),r.setAttribute("stroke-width",a),r.getAttribute("shape"),{started:!0}}if("polygon"===i.getMode()){const e=Number(r.getAttribute("cx")),o=Number(r.getAttribute("cy")),n=Number(r.getAttribute("sides")),i=r.getAttribute("fill"),l=r.getAttribute("strokecolor"),s=Number(r.getAttribute("strokeWidth"));let a=t.mouse_x,c=t.mouse_y;const u=Math.sqrt((a-e)*(a-e)+(c-o)*(c-o))/1.5;r.setAttribute("edge",u);const d=u/2*cot(Math.PI/n)*sec(Math.PI/n);let g="";for(let t=0;n>=t;t++){const i=2*Math.PI*t/n;a=d*Math.cos(i)+e,c=d*Math.sin(i)+o,g+=a+","+c+" "}return r.setAttribute("points",g),r.setAttribute("fill",i),r.setAttribute("stroke",l),r.setAttribute("stroke-width",s),{started:!0}}}},mouseUp(){if("star"===i.getMode()){return{keep:"0"!==r.getAttribute("r"),element:r}}if("polygon"===i.getMode()){return{keep:"0"!==r.getAttribute("edge"),element:r}}},selectedChanged(t){s=t.elems;let e=s.length;for(;e--;){const o=s[e];o&&"star"===o.getAttribute("shape")?t.selectedElement&&!t.multiselected?(l("starNumPoints").value=o.getAttribute("point"),l("radialShift").value=o.getAttribute("radialshift"),showPanel(!0,"star")):showPanel(!1,"star"):o&&"regularPoly"===o.getAttribute("shape")?t.selectedElement&&!t.multiselected?(l("polySides").value=o.getAttribute("sides"),showPanel(!0,"polygon")):showPanel(!1,"polygon"):(showPanel(!1,"star"),showPanel(!1,"polygon"))}}}}},o=Object.freeze({__proto__:null,default:{name:"star",title:"Polygone/Star Tool",buttons:[{title:"Star Tool"},{title:"Polygon Tool"}],contextTools:[{title:"Number of Sides",label:"points"},{title:"Pointiness",label:"Pointiness"},{title:"Twists the star",label:"Radial Shift"},{title:"Number of Sides",label:"sides"}]}}),n=Object.freeze({__proto__:null,default:{name:"etoile",title:"Outil Polygone/Etoile",buttons:[{title:"Outil Etoile"},{title:"Outil Polygone"}],contextTools:[{title:"Nombre de côtés",label:"points"},{title:"Précision",label:"Précision"},{title:"Torsion Etoile",label:"Décalage Radial"},{title:"Nombre de côtés",label:"côtés"}]}}),i=Object.freeze({__proto__:null,default:{name:"星形",title:"Polygone/Star Tool",buttons:[{title:"星形工具"},{title:"多边形工具"}],contextTools:[{title:"顶点",label:"顶点"},{title:"钝度",label:"钝度"},{title:"径向",label:"径向"},{title:"边数",label:"边数"}]}});export{e as default};
//# sourceMappingURL=ext-polystar.js.map