pacem 0.53.0-stevin → 0.53.0

package/dist/css/pacem-dark-content.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/css/pacem-dark-shell.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/css/pacem-dark.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/css/pacem-light-content.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/css/pacem-light-shell.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/css/pacem-light.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/css/pacem-phousys-content.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/css/pacem-phousys-shell.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/css/pacem-phousys.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/js/azure-maps.d.ts

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/js/pacem-2d.d.ts

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */

package/dist/js/pacem-2d.js

@@ -1,8 +1,9 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
+"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/js/pacem-2d.min.js

@@ -1,6 +1,6 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
-var Pacem,__decorate=this&&this.__decorate||function(t,e,r,i){var a,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(s=(n<3?a(s):n>3?a(e,r,s):a(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s};!function(t){!function(e){function r(e){return!t.Utils.isNull(e)&&"stage"in e}function i(t){return r(t)}function a(e){return"stops"in e&&t.Utils.isArray(e.stops)}e.isDrawable=r,e.isUiObject=i,e.isLinearGradient=function(e){return a(e)&&"start"in e&&t.Point.isPoint(e.start)&&"end"in e&&t.Point.isPoint(e.end)},e.isRadialGradient=function(e){return a(e)&&"center"in e&&t.Point.isPoint(e.center)&&"radius"in e&&"number"==typeof e.radius};e.PresentationState=class PresentationState{static combine(e,r,i=null){return{opacity:(e.opacity??1)*(r.opacity??1),transformMatrix:i??t.Matrix2D.multiply(r.transformMatrix,e.transformMatrix),dashArray:e.dashArray??r.dashArray,fill:e.fill??r.fill,lineCap:e.lineCap??r.lineCap,lineJoin:e.lineJoin??r.lineJoin,lineWidth:e.lineWidth??r.lineWidth,stroke:e.stroke??r.stroke}}},e.isPresentationObject=function(t){return i(t)&&("fill"in t||"transformMatrix"in t||"stroke"in t||"lineJoin"in t||"dashArray"in t||"lineWidth"in t||"opacity"in t||"lineCap"in t)},e.isShape=function(t){return i(t)&&"pathData"in t},e.isGroup=function(e){return i(e)&&"childDrawables"in e&&!t.Utils.isNullOrEmpty(e.childDrawables)},e.isText=function(t){return i(t)&&"text"in t&&"string"==typeof t.text},e.isImage=function(t){return i(t)&&"src"in t&&"string"==typeof t.src};class UI2DEvent extends t.CustomUIEvent{constructor(t,e,r,i){super(t,e,r),this.#t=i}#t;get transformMatrix(){return this.#t}project(e={x:this.screenX,y:this.screenY}){return t.Matrix2D.multiply(e,this.#t)}}e.UI2DEvent=UI2DEvent;e.Shape=class Shape{static empty(){return{pathData:"",vertices:[],boundingRect:{x:0,y:0,width:0,height:0}}}};e.DragEvent=class DragEvent extends UI2DEvent{};e.DrawableEvent=class DrawableEvent extends UI2DEvent{constructor(t,e,r,i){super(t,{detail:e,bubbles:!0,cancelable:!0},r,i)}};e.StageEvent=class StageEvent extends UI2DEvent{constructor(t,e,r,i=e.transformMatrix){super(t,{detail:e,bubbles:!0,cancelable:!0},r,i)}}}(t.Drawing||(t.Drawing={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(r){r.TAG_MIDDLE_NAME="2d",r.TWO_PI=2*Math.PI;const i=Math.PI/180;class Pacem2DAdapterElement extends e.PacemEventTarget{constructor(){super(...arguments),this.DefaultShapeValues={stroke:"#000",lineWidth:1,fill:"#fff"}}snapshotElement(e,r,i,a){const n=!t.Utils.isNullOrEmpty(r),s=i??(n?"image/jpeg":null),o=a??(n?.9:null);return t.Utils.snapshotElement(e,r,s,o)}}r.Pacem2DAdapterElement=Pacem2DAdapterElement;class DrawableElement extends e.PacemCrossItemsContainerElement{validate(t){return!1}findContainer(){return this.parent||this.stage}get stage(){return this._scene=this._scene||t.CustomElementUtils.findAncestorOfType(this,r.Pacem2DElement)}get parent(){return this._drawableParent=this._drawableParent||t.CustomElementUtils.findAncestor(this,t=>t instanceof DrawableElement)}disconnectedCallback(){delete this._scene,delete this._drawableParent,super.disconnectedCallback()}propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i&&"hide"===t)this.stage?.draw(this)}}__decorate([t.Watch({emit:!1,reflectBack:!0,converter:t.PropertyConverters.String})],DrawableElement.prototype,"tag",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Boolean})],DrawableElement.prototype,"inert",void 0),r.DrawableElement=DrawableElement;class UiElement extends DrawableElement{#t=t.Matrix2D.identity;viewActivatedCallback(){super.viewActivatedCallback(),this._updateTransformMatrix()}propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"rotate":case"scaleX":case"scaleY":case"translateX":case"translateY":this._updateTransformMatrix();case"opacity":this.stage?.draw(this)}}_updateTransformMatrix(){let t=i*(this.rotate??0),e=Math.cos(t),r=Math.sin(t),a=(this.scaleX??1)*e,n=-r,s=r,o=(this.scaleY??1)*e,l=this.translateX??0,c=this.translateY??0;this.#t={a:a,b:n,c:s,d:o,e:l,f:c}}get transformMatrix(){const t=this.#t;return{a:t.a,b:t.b,c:t.c,d:t.d,e:t.e,f:t.f}}}__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"rotate",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"scaleX",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"scaleY",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"translateX",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"translateY",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"opacity",void 0),r.UiElement=UiElement;class PresentationElement extends UiElement{propertyChangedCallback(e,r,i,a){if(super.propertyChangedCallback(e,r,i,a),!a)switch(e){case"stroke":case"lineWidth":case"lineJoin":case"lineCap":case"dashArray":case"fill":t.Utils.isNull(this.stage)||this.stage.draw(this)}}}__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],PresentationElement.prototype,"stroke",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],PresentationElement.prototype,"fill",void 0),__decorate([t.Watch({emit:!1,converter:{convert:t=>t?.split(",").map(t=>parseInt(t)).filter(t=>!Number.isNaN(t)),convertBack:t=>t?.join(",")}})],PresentationElement.prototype,"dashArray",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],PresentationElement.prototype,"lineWidth",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],PresentationElement.prototype,"lineJoin",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],PresentationElement.prototype,"lineCap",void 0),r.PresentationElement=PresentationElement;class ShapeElement extends PresentationElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i&&"data"===t)this.stage?.draw(this)}viewActivatedCallback(){super.viewActivatedCallback(),this.recomputeShape()}recomputeShape(){const{pathData:t,vertices:e,boundingRect:r}=this.getShapeGeometry();this.#e=e,this.#r=r,this.data=t}get pathData(){return this.data}#r;get boundingRect(){return this.#r}#e;get vertices(){return this.#e}}__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],ShapeElement.prototype,"data",void 0),r.ShapeElement=ShapeElement}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){var r,i;function a(e,r,i,a,n){for(a??=0,n??=0,a%=360,n%=360;a<0;)a+=360;for(;n<a;)n+=360;return(a-n).isCloseTo(0)?function(t,e,r){const i=2*e,a=t.x,n=t.y;return{pathData:`M ${a} ${n} m ${-e},0 a ${e},${r} 0 1,1 ${i},0 a ${e},${r} 0 1,1 ${-i},0`,vertices:[],boundingRect:{x:a-e,y:n-r,width:2*e,height:2*r}}}(e,r,i):function(e,r,i,a,n){const s=Math.PI/180,o=s*a,l=s*n,c=t=>r*i/Math.sqrt(Math.pow(Math.cos(t)*i,2)+Math.pow(Math.sin(t)*r,2)),h=c(o),d=c(l),m=(t,e)=>({x:t*Math.cos(e),y:t*Math.sin(e)}),p=m(h,o),u=m(d,l),g={x:e.x+p.x,y:e.y+p.y},v={x:e.x+u.x,y:e.y+u.y};let y=t.Rect.expand(e,g,v);n<a&&(n+=360),(a<=0&&n>0||n>=360)&&(y=t.Rect.expand(y,{x:e.x+r,y:e.y})),(a<=90&&n>90||n>=450)&&(y=t.Rect.expand(y,{x:e.x,y:e.y+i})),(a<=180&&n>180||n>=540)&&(y=t.Rect.expand(y,{x:e.x-r,y:e.y})),(a<=270&&n>270||n>=630)&&(y=t.Rect.expand(y,{x:e.x,y:e.y-i}));const f=l-o>Math.PI?"1":"0";return{pathData:`M ${g.x} ${g.y} A ${r},${i} 0 ${f},1 ${v.x},${v.y} L ${e.x},${e.y} Z`,vertices:[g,v],boundingRect:y}}(e,r,i,a,n)}let n=r=class PacemEllipseElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"center":case"rx":case"ry":case"start":case"end":this.recomputeShape()}}getPathData(){const e=this.rx,i=this.ry,a=this.center,n=this.start??0,s=this.end??0;return t.Utils.isNull(a)||t.Utils.isNull(e)||t.Utils.isNull(i)?null:r.getPathData(a,e,i,n,s)}getShapeGeometry(){return a(this.center??{x:0,y:0},this.rx??0,this.ry??0,this.start,this.end)}static getPathData(t={x:NaN,y:NaN},e=NaN,r=NaN,i,n){const{pathData:s}=a(t,e,r,i,n);return s}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],n.prototype,"center",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],n.prototype,"rx",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],n.prototype,"ry",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],n.prototype,"start",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],n.prototype,"end",void 0),n=r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-ellipse"})],n),e.PacemEllipseElement=n;let s=i=class PacemCircleElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"center":case"radius":case"start":case"end":this.recomputeShape()}}getPathData(){const e=this.radius,r=this.center;return t.Utils.isNull(r)||t.Utils.isNull(e)?null:i.getPathData(r,e,this.start,this.end)}getShapeGeometry(){const t=this.center??{x:0,y:0},e=this.radius??0;return a(t,e,e,this.start,this.end)}static getPathData(t={x:NaN,y:NaN},e=NaN,r,i){return n.getPathData(t,e,e,r,i)}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],s.prototype,"center",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],s.prototype,"radius",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],s.prototype,"start",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],s.prototype,"end",void 0),s=i=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-circle"})],s),e.PacemCircleElement=s}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){let r=class PacemGroupElement extends e.PresentationElement{validate(t){return t instanceof e.DrawableElement&&t.parent===this}#i=[];get childDrawables(){return this.#i}propertyChangedCallback(e,r,i,a){switch(super.propertyChangedCallback(e,r,i,a),e){case"items":case"datasource":this.#i=i||[];const e=this.stage;t.Utils.isNull(e)||e.draw(this,!0)}}};__decorate([t.Watch({emit:!1})],r.prototype,"datasource",void 0),r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-group"})],r),e.PacemGroupElement=r}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){let r=class PacemImageElement extends e.UiElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"src":case"x":case"y":case"width":case"height":this.stage?.draw(this)}}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"src",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],r.prototype,"x",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],r.prototype,"y",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],r.prototype,"width",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],r.prototype,"height",void 0),r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-image"})],r),e.PacemImageElement=r}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){var r;let i=r=class PacemLineElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"from":case"to":this.recomputeShape()}}getShapeGeometry(){const e=this.from,r=this.to;if(t.Utils.isNull(e)||t.Utils.isNull(r))return t.Drawing.Shape.empty();const i=e.x,a=e.y,n=r.x,s=r.y,o={x:Math.min(i,n),y:Math.min(a,s),width:Math.abs(i-n),height:Math.abs(a-s)};return{pathData:this.getPathData(),vertices:[e,r],boundingRect:o}}getPathData(){const e=this.from,i=this.to;return t.Utils.isNull(e)||t.Utils.isNull(i)?null:r.getPathData(e,i)}static getPathData(t={x:NaN,y:NaN},e={x:NaN,y:NaN}){return`M ${t.x} ${t.y} L ${e.x} ${e.y}`}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],i.prototype,"from",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],i.prototype,"to",void 0),i=r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-line"})],i),e.PacemLineElement=i}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){let r=class PacemPathElement extends e.ShapeElement{constructor(){super(...arguments),this.getPathData=()=>this.d}propertyChangedCallback(t,e,r,i){super.propertyChangedCallback(t,e,r,i),"d"!==t||i||this.recomputeShape()}getShapeGeometry(){return{pathData:this.getPathData(),boundingRect:null,vertices:[]}}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"d",void 0),r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-path"})],r),e.PacemPathElement=r}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){var r;let i=r=class PacemPolygonElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"radius":case"starIndent":case"sides":this.recomputeShape()}}getPathData(){const e=this.sides,i=this.radius,a=this.center;return t.Utils.isNull(e)||t.Utils.isNull(i)?null:r.getPathData(a,i,e,this.starIndent)}getShapeGeometry(){const e=this.center??{x:0,y:0},i=this.radius??0,a=this.sides??3,n=this.starIndent;return a<3?t.Drawing.Shape.empty():r.getShapeGeometry(e,i,a,n)}static getShapeGeometry(t,e,r,i=0){const a={x:t.x,y:t.y-e};let n=`M ${a.x} ${a.y}`;const s=[a],o=2*Math.PI/r,l=.5*o,c=i>0,h=e*Math.cos(l);for(let a=1;a<r;a++){const r=a*o,d=t.x+Math.sin(r)*e,m=t.y-Math.cos(r)*e;if(c){const e=h*(1-i),a=r-l,o=t.x+Math.sin(a)*e,c=t.y-Math.cos(a)*e;n+=` L ${o} ${c} L ${d} ${m}`,s.push({x:o,y:c})}else n+=` L ${d} ${m}`;s.push({x:d,y:m})}if(c){const e=h*(1-i),r=2*Math.PI-l,a=t.x+Math.sin(r)*e,o=t.y-Math.cos(r)*e;n+=` L ${a} ${o}`,s.push({x:a,y:o})}s.push(a);const d=2*e;return{pathData:n+" Z",vertices:s,boundingRect:{x:a.x-e,y:a.y,width:d,height:d}}}static getPathData(t,e,i,a=0){const{pathData:n}=r.getShapeGeometry(t,e,i,a);return n}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],i.prototype,"sides",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],i.prototype,"radius",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],i.prototype,"center",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],i.prototype,"starIndent",void 0),i=r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-polygon"})],i),e.PacemPolygonElement=i}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){var r;const i={convert:e=>{const r=t.parseAsNumericalArray(e);if(r.length%2==0){const t=[];for(let e=0;e<r.length;e+=2)t.push({x:r[e],y:r[e+1]});return t}return JSON.parse(e)},convertBack:t=>JSON.stringify(t)};let a=r=class PacemPolylineElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"points":case"closed":this.recomputeShape()}}static getShapeGeometry(e,r){if(t.Utils.isNullOrEmpty(e))return t.Drawing.Shape.empty();let i="",a=Number.MAX_VALUE,n=Number.MAX_VALUE,s=Number.MIN_VALUE,o=Number.MIN_VALUE;for(let t=0;t<e.length;t++){const{x:r,y:l}=e[t];i+=`${0===t?"M":"L"} ${r} ${l} `,a=Math.min(a,r),s=Math.max(s,r),n=Math.min(n,l),o=Math.max(o,l)}return r&&(i+="Z"),{pathData:i,vertices:e,boundingRect:{x:a,y:n,width:s-a,height:o-n}}}getShapeGeometry(){return r.getShapeGeometry(this.points,this.closed)}getPathData(){const{pathData:t}=this.getShapeGeometry();return t}static getPathData(t,e){const{pathData:i}=r.getShapeGeometry(t,e);return i}};__decorate([t.Watch({emit:!1,converter:i})],a.prototype,"points",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Boolean})],a.prototype,"closed",void 0),a=r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-polyline"})],a),e.PacemPolylineElement=a}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){var r;function i(t){const e=t[2],r=t[4]??e,i="cut"===t[6]?o.Cut:o.Rounded;return{rx:a(e),ry:a(r),type:i}}function a(t){return{value:parseFloat(t),unit:t.endsWith("%")?"pct":"u"}}function n(t){return`${t.value}${"pct"===t.unit?"%":""}`}const s=/(([\d\.]+%?)(\s*,?\s*([\d\.]+%?))?(\s+(cut|round))?)/g;let o;!function(t){t.Rounded="rounded",t.Cut="cut"}(o=e.CornerType||(e.CornerType={}));let l=r=class PacemRectElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){super.propertyChangedCallback(t,e,r,i),i||"x"!==t&&"y"!==t&&"w"!==t&&"h"!==t&&"r"!==t&&"cornerType"!==t||this.recomputeShape()}getPathData(){const e=this.x,i=this.y,a=this.w,n=this.h;let s=this.r??{rx:{value:0},ry:{value:0},type:o.Rounded};return t.Utils.isArray(s)||(s=[s,s,s,s]),s=s.map(t=>"number"==typeof t?{rx:{value:t},ry:{value:t},type:this.cornerType}:t),t.Utils.isNull(e)||t.Utils.isNull(i)||t.Utils.isNull(a)||t.Utils.isNull(n)?null:r.getPathData(e,i,a,n,s)}getShapeGeometry(){const t=this.x,e=this.y,r=t+this.w,i=e+this.h;return{pathData:this.getPathData(),vertices:[{x:t,y:e},{x:r,y:e},{x:r,y:i},{x:t,y:i}],boundingRect:{x:t,y:e,width:this.w,height:this.h}}}static getPathData(e=NaN,r=NaN,i=NaN,a=NaN,n=null){if(!n)return`M ${e} ${r} h ${i} v ${a} h ${-i} z`;t.Utils.isArray(n)||(n=[n,n,n,n]);const s=n[0],o=n[1],l=n[2],c=n[3],h=t=>"pct"===t.unit?.01*t.value*i:t.value,d=t=>"pct"===t.unit?.01*t.value*a:t.value,m=h(s.rx),p=d(s.ry),u=h(o.rx),g=d(o.ry),v=h(l.rx),y=d(l.ry),f=h(c.rx),_=d(c.ry);let x=`M ${e},${r+p}`;if("cut"===s.type)x+=` l ${m},${-p}`;else x+=` a ${m} ${p} 0 0 1 ${m} ${-p}`;if(x+=" h "+(i-m-u),"cut"===o.type)x+=` l ${u},${g}`;else x+=` a ${u} ${g} 0 0 1 ${u} ${g}`;if(x+=" v "+(a-g-y),"cut"===l.type)x+=` l ${-v},${y}`;else x+=` a ${v} ${y} 0 0 1 ${-v} ${y}`;if(x+=" h "+-(i-v-f),"cut"===c.type)x+=` l ${-f},${-_}`;else x+=` a ${f} ${_} 0 0 1 ${-f} ${-_}`;return x+" z"}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],l.prototype,"x",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],l.prototype,"y",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],l.prototype,"w",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],l.prototype,"h",void 0),__decorate([t.Watch({emit:!1,converter:{convert:t=>function(t){let e;const r=[];for(;e=s.exec(t);)r.push(e);switch(r.length){case 1:const t=i(r[0]);return[t,t,t,t];case 4:return[i(r[0]),i(r[1]),i(r[2]),i(r[3])];default:return null}}(t),convertBack:t=>function(t){const e=t[0],r=t[1],i=t[2],a=t[3];return`${n(e.rx)},${n(e.ry)} ${n(r.rx)},${n(r.ry)} ${n(i.rx)},${n(i.ry)} ${n(a.rx)},${n(a.ry)}`}(t)}})],l.prototype,"r",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],l.prototype,"cornerType",void 0),l=r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-rect"})],l),e.PacemRectElement=l}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(r){const i=/^\s*[xX]\s*([Mm](in|ax|id))\s*[yY]\s*([Mm](in|ax|id))(\s+(none|slice|meet))?\s*$/,a={convert:t=>{const e=i.exec(t);return e&&e.length>=4?{x:e[1].toLowerCase(),y:e[3].toLowerCase(),slice:"slice"===e[6]}:"none"},convertBack:e=>t.Utils.isNull(e)||"string"==typeof e?"none":`xM${e.x.substr(1)}YM${e.y.substr(1)} ${e.slice?"slice":"meet"}`},n={panControl:!0,zoomControl:!0,panModifiers:[t.EventKeyModifier.AltKey],zoomModifiers:[t.EventKeyModifier.AltKey]};let s=class Pacem2DElement extends e.PacemItemsContainerElement{constructor(){super(...arguments),this.#t=t.Matrix2D.identity,this._options=n,this._resizeHandler=e=>{this.#a={x:e.detail.left,y:e.detail.top,width:e.detail.width,height:e.detail.height};const r=this.adapter;t.Utils.isNull(r)||this._invalidateSize()},this._zoomHandler=e=>{const r=this._options;if(r.zoomControl&&t.CustomEventUtils.matchModifiers(e,r.zoomModifiers)){t.avoidHandler(e);const r=1+.1*(e.deltaY<0?-1:1),i=t.Utils.offsetRect(e.currentTarget),a={x:e.clientX,y:e.clientY};this._zoom(r,i,a)}},this._panHandler=e=>{const r=this._panningStart,i=this._getPanPoint(e);if(!t.Utils.isNullOrEmpty(r&&r.point)&&!t.Utils.isNull(i)){t.avoidHandler(e);const a=r.factor,n=r.box,s=r.point;this.viewbox={x:n.x-a*(i.x-s.x),y:n.y-a*(i.y-s.y),width:n.width,height:n.height}}},this._panStartHandler=e=>{if(!this._options.panControl)return;const r=this.#a,i=this.viewbox||{x:0,y:0,width:r.width,height:r.height},a=this._getPanPoint(e);if(a){t.avoidHandler(e),this._stage.style.pointerEvents="none";const n=this._getActualAspectRatio(),s=i.width/r.width,o=i.height/r.height,l=n.slice?Math.min(s,o):Math.max(s,o);this._panningStart={point:a,box:i,factor:l}}},this._panEndHandler=t=>{this._stage.style.pointerEvents="",this._panningStart=null}}get stage(){return this._stage}snapshot(e,r,i){const a=this.adapter;return t.Utils.isNull(a)?Promise.resolve(null):a.snapshot(this,e,r,i)}#n;#t;get transformMatrix(){return this.#t}_transformMatrixScale(){const e=this.#a||t.Utils.offsetRect(this._stage);var r=this.#n||e;const i=this.viewbox||r,a=this.aspectRatio||"none",n="none"===a?"stretch":a.slice?"cover":"contain";return t.Rect.findTransform(i,r,n).a}validate(e){return e instanceof r.DrawableElement&&t.Utils.isNull(e.parent)}draw(e,r=!1){const i=this.adapter;if(!this.disabled&&!t.Utils.isNull(i)){let t=new CustomEvent("predraw",{cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||(i.draw(this,e,r),this.dispatchEvent(new CustomEvent("draw")))}}_drawDebounced(e,r=!1){!t.Utils.isNull(e)&&t.Drawing.isGroup(e)?this.draw(e,r):this.draw(e)}requestDraw(t,e=!1){this._drawDebounced(t,e)}_buildUpDatasourceFromDOM(){this.datasource=(this.items||[]).slice()}#a;_getActualAspectRatio(){const t=this.aspectRatio||"none";return{x:"none"===t?"mid":t.x,y:"none"===t?"mid":t.y,slice:"none"!==t&&t.slice}}_zoomFromValue(e){const r=this.#a;if(t.Utils.isNull(r))return;const i=r,a=this.#n||i,n=this.viewbox||a,s=this.aspectRatio||"none",o="none"===s?"stretch":s.slice?"cover":"contain",l=t.Rect.findTransform(n,i,o),c=t.Rect.findTransform(a,i,o),h=l.a/(c.a*e);this._zoom(h)}_zoom(e,r,i){t.Utils.isNull(r)&&(r=t.Utils.offsetRect(this._stage)),t.Utils.isNull(i)&&(i={x:r.x+.5*r.width,y:r.y+.5*r.height});const a=this.#a,n=this.viewbox||a,s=Math.min(n.width,n.height),o=s*e,l=s*e;if(o>0&&l>0){const t=this._getActualAspectRatio(),e=t.x,a=t.y,s=t.slice,c=n.width/n.height,h=s?Math.max(r.width,r.height):Math.min(r.width,r.height);let d,m;switch(e){case"mid":d=(o-n.width)*(i.x-r.x-.5*(r.width-h))/(h*c);break;case"max":d=(o-n.width)*(i.x-r.x-(r.width-h))/(h*c);break;default:d=(o-n.width)*(i.x-r.x)/(h*c)}switch(a){case"mid":m=(l-n.height)*(i.y-r.y-.5*(r.height-h))/(h*c);break;case"max":m=(l-n.height)*(i.y-r.y-(r.height-h))/(h*c);break;default:m=(l-n.height)*(i.y-r.y)/(h*c)}const p=n.x-d,u=n.y-m;this.viewbox={x:p,y:u,width:o,height:l}}}_getPanPoint(e){const r=this._options;return e instanceof MouseEvent&&t.CustomEventUtils.matchModifiers(e,r.panModifiers)?t.CustomEventUtils.getEventCoordinates(e).page:null}_invalidateSize(){this.adapter.invalidateSize(this,this.#a);const r=this.#t;this.#t=this.adapter.getTransformMatrix(this),this.dispatchEvent(new t.PropertyChangeEvent({propertyName:"transformMatrix",currentValue:this.#t,oldValue:r})),this.zoom=this._transformMatrixScale(),this.dispatchEvent(new e.ResizeEvent(this.#a))}viewActivatedCallback(){super.viewActivatedCallback();const e=this.adapter;t.Utils.isNull(e)||(e.initialize(this),this._invalidateSize(),this._drawDebounced());const r=this._resize;r.addEventListener(t.Components.ResizeEventName,this._resizeHandler,!1);const i=this._stage;r.target=i;const a={capture:!1,passive:!0};i.addEventListener("wheel",this._zoomHandler,!1),i.addEventListener("mousedown",this._panStartHandler,!1),i.addEventListener("touchstart",this._panStartHandler,a),window.addEventListener("mousemove",this._panHandler,!1),window.addEventListener("mouseup",this._panEndHandler,!1),window.addEventListener("touchmove",this._panHandler,a),window.addEventListener("touchend",this._panEndHandler,a)}propertyChangedCallback(e,r,i,a){switch(super.propertyChangedCallback(e,r,i,a),e){case"adapter":t.Utils.isNull(r)||r.dispose(this),t.Utils.isNull(i)||(i.initialize(this),this._invalidateSize(),this._drawDebounced());break;case"aspectRatio":t.Utils.isNull(this.adapter)||this._invalidateSize();break;case"viewbox":t.Utils.isNull(this.adapter)||this._invalidateSize(),this.#n??=this.viewbox||null;break;case"items":this._buildUpDatasourceFromDOM();break;case"zoom":i!==this._transformMatrixScale()&&this._zoomFromValue(i);break;case"options":this._options=t.Utils.extend({},n,i||{});break;case"disabled":case"datasource":this._drawDebounced()}}disconnectedCallback(){const e=this._resize,r=this._stage;t.Utils.isNull(e)||e.removeEventListener(t.Components.ResizeEventName,this._resizeHandler,!1),t.Utils.isNull(r)||(r.removeEventListener("wheel",this._zoomHandler,!1),r.removeEventListener("mousedown",this._panStartHandler,!1),r.removeEventListener("touchstart",this._panStartHandler),window.removeEventListener("mousemove",this._panHandler,!1),window.removeEventListener("mouseup",this._panEndHandler,!1),window.removeEventListener("touchmove",this._panHandler),window.removeEventListener("touchend",this._panEndHandler)),t.Utils.isNull(this.adapter)||this.adapter.dispose(this),super.disconnectedCallback()}};__decorate([t.Watch({converter:t.PropertyConverters.Element})],s.prototype,"adapter",void 0),__decorate([t.Watch({reflectBack:!0,converter:t.PropertyConverters.Rect})],s.prototype,"viewbox",void 0),__decorate([t.Watch({emit:!1,reflectBack:!0,converter:a})],s.prototype,"aspectRatio",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Json})],s.prototype,"datasource",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Json})],s.prototype,"options",void 0),__decorate([t.Watch({converter:t.PropertyConverters.Number})],s.prototype,"zoom",void 0),__decorate([t.ViewChild("."+t.PCSS+"-2d")],s.prototype,"_stage",void 0),__decorate([t.ViewChild(t.P+"-resize")],s.prototype,"_resize",void 0),__decorate([t.Debounce(!0)],s.prototype,"_drawDebounced",null),s=__decorate([t.CustomElement({tagName:t.P+"-"+r.TAG_MIDDLE_NAME,shadow:!0,template:`<${t.P}-resize watch-position="true"></${t.P}-resize><div class="${t.PCSS}-2d" part="container"></div><slot></slot>`})],s),r.Pacem2DElement=s}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){let r=class PacemTextElement extends e.UiElement{propertyChangedCallback(e,r,i,a){if(!a)switch(e){case"text":case"color":case"fontFamily":case"fontSize":case"fontWeight":case"fontStyle":case"anchor":t.Utils.isNull(this.stage)||this.stage.draw(this)}}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"text",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"color",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"fontFamily",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],r.prototype,"fontSize",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"fontWeight",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"fontStyle",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],r.prototype,"anchor",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"textAnchor",void 0),r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-text"})],r),e.PacemTextElement=r}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){e.AdapterUtils=class AdapterUtils{static stageDispatch(e,r,i){e instanceof EventTarget&&e.dispatchEvent(new t.Drawing.StageEvent("stage"+r,e,i,e.transformMatrix))}static isValidViewbox(e){return!t.Utils.isNullOrEmpty(e)&&t.Rect.isRect(e)&&Number.isFinite(e.x)&&Number.isFinite(e.y)&&Number.isFinite(e.width)&&Number.isFinite(e.height)}static itemDispatch(e,r,i){if(!t.Utils.isNull(e)){var a,n,s;i instanceof Event?n=i:a={item:e,offset:i},"string"==typeof r?s=r:(s=r.type,n=r.originalEvent);const l=e.stage.transformMatrix,c=()=>i instanceof Event?new t.Drawing.DrawableEvent(s,e,n,l):new t.Drawing.DragEvent(s,{detail:a,cancelable:s===t.UI.DragDropEventType.Init||s===t.UI.DragDropEventType.Drag},n,l),h=i instanceof Event?new t.Drawing.DrawableEvent("item"+s,e,n,l):new t.Drawing.DragEvent("item"+s,{detail:a,cancelable:s===t.UI.DragDropEventType.Init||s===t.UI.DragDropEventType.Drag},n,l);var o=!1;if(e instanceof EventTarget){const t=c();e.dispatchEvent(t),o=t.defaultPrevented}return e.stage.dispatchEvent(h),o||h.defaultPrevented}return!1}}}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){const r="pacem:2d-canvas-scene",i="pacem:2d-parent-matrix",a=t.CustomElementUtils.setAttachedPropertyValue,n=t.CustomElementUtils.getAttachedPropertyValue;function s(e){return"none"===e||t.Utils.isNullOrEmpty(e)}function o(e,r){return t.Utils.isNull(e)?r:e}let l=class PacemCanvasAdapterElement extends e.Pacem2DAdapterElement{constructor(){super(...arguments),this._pointer={page:{x:0,y:0},screen:{x:0,y:0},client:{x:0,y:0}},this._dragInitHandler=r=>{const a=this._hitTarget;if(t.Utils.isNull(a)||!t.Drawing.isUiObject(a)||!a.draggable)return void r.preventDefault();const s=r.detail,o=a,l=a.transformMatrix??t.Matrix2D.identity,c=n(a,i,t.Matrix2D.identity);s.data={item:o,initialTransformMatrix:l,parentMatrix:c};e.AdapterUtils.itemDispatch(o,r,{x:0,y:0})&&r.preventDefault()},this._draggingHandler=r=>{t.avoidHandler(r),this._dragging=!0;const i=r.detail,a=i.data,n=i.currentPosition.x-i.origin.x,s=i.currentPosition.y-i.origin.y,o={x:n*a.parentMatrix.a+a.initialTransformMatrix.e,y:s*a.parentMatrix.d+a.initialTransformMatrix.f},l=a.item.stage.transformMatrix;if(!e.AdapterUtils.itemDispatch(a.item,r,{x:n*l.a+l.e,y:s*l.d+l.f}))if(a.item instanceof t.Components.Drawing.UiElement)a.item.translateX=o.x,a.item.translateY=o.y;else{const e=a.initialTransformMatrix,r={a:e.a,b:e.b,c:e.c,d:e.d,e:o.x,f:o.y};t.Utils.extend(a.item,{transformMatrix:r})}},this._dragEndHandler=t=>{this._dragging=!1;const r=t.detail.data,i=r.item.transformMatrix;e.AdapterUtils.itemDispatch(r.item,t,{x:i.e,y:i.f})},this._mousemoveHandler=i=>{this._scopeEvent=i,this._pointer=t.CustomEventUtils.getEventCoordinates(i);const a=i.srcElement,s=n(a,r);this._requestDraw(s),this._dragging||t.Utils.isNull(this._hitTarget)||e.AdapterUtils.stageDispatch(s,"move",i)},this._mouseDownUpHandler=i=>{this._scopeEvent=i,this._pointer=t.CustomEventUtils.getEventCoordinates(i);const a=i.target;if(a instanceof HTMLCanvasElement){const s=n(a,r),o=this._hitTarget,l=i.type.replace(/^(mouse|touch)/,""),c="end"===l?"click":l;t.Utils.isNull(o)||o.stage!==s?e.AdapterUtils.stageDispatch(s,c,i):e.AdapterUtils.itemDispatch(this._hitTarget,c,i)}},this._scenes=new WeakMap,this._handles=new WeakMap}snapshot(t,e,r,i){const a=this._scenes;if(a.has(t)){const n=a.get(t).context.canvas;return this.snapshotElement(n,e,r,i)}return Promise.resolve(null)}getCanvas(t){const e=this._scenes;if(e.has(t)){return e.get(t).context.canvas}return null}_getScreenInverseMatrix(e,r){return t.Matrix2D.invert({a:e.a,b:e.b,c:e.c,d:e.d,e:e.e+r.x,f:e.f+r.y})}getTransformMatrix(e){const r=this._scenes;return r.has(e)?r.get(e).screenInverseMatrix:t.Matrix2D.identity}viewActivatedCallback(){super.viewActivatedCallback();const e=this._dragger=document.createElement(t.P+"-drag-drop");e.mode=t.UI.DragDataMode.Copy,e.dropBehavior=t.UI.DropBehavior.None,e.spillBehavior=t.UI.DropTargetMissedBehavior.None;const r=document.createElement("div");r.hidden=!0,e.floater=r;t.CustomElementUtils.findAncestorShell(this).appendChild(e),e.addEventListener(t.UI.DragDropEventType.Init,this._dragInitHandler,!1),e.addEventListener(t.UI.DragDropEventType.Drag,this._draggingHandler,!1),e.addEventListener(t.UI.DragDropEventType.End,this._dragEndHandler,!1)}disconnectedCallback(){const e=this._dragger;t.Utils.isNull(e)||(e.removeEventListener(t.UI.DragDropEventType.Init,this._dragInitHandler,!1),e.removeEventListener(t.UI.DragDropEventType.Drag,this._draggingHandler,!1),e.removeEventListener(t.UI.DragDropEventType.End,this._dragEndHandler,!1),e.remove()),super.disconnectedCallback()}invalidateSize(r,i){const a=this._scenes;if(!t.Utils.isNull(r)&&!t.Utils.isNullOrEmpty(i)&&a.has(r)){const n=a.get(r),s=n.context;s.canvas.width=i.width,s.canvas.height=i.height;const o=n.offset=t.Utils.offsetRect(s.canvas),l={x:0,y:0,width:i.width,height:i.height},c=r.aspectRatio,h=r.viewbox;if(e.AdapterUtils.isValidViewbox(h)){let e="contain",r="center",i="middle";if("object"==typeof c){switch(e=c.slice?"cover":"contain",c.x){case"min":r="left";break;case"max":r="right"}switch(c.y){case"min":i="top";break;case"max":i="bottom"}}const a=t.Rect.findTransform({x:0,y:0,width:h.width,height:h.height},l,e,r,i),s=t.Matrix2D.translate(a,{x:-a.a*h.x,y:-a.a*h.y});n.transformMatrix=s,n.screenInverseMatrix=this._getScreenInverseMatrix(s,o)}else n.transformMatrix=t.Matrix2D.identity}this._requestDraw(r)}getHitTarget(e){const r=this._hitTarget;return t.Utils.isNull(r)||r.stage!==e?null:r}initialize(e){if(t.Utils.isNull(e))throw"Provided scene is null or undefined.";const i=this._scenes,n=this._dragger;if(i.has(e)){const r=i.get(e).context.canvas;return t.Utils.isNull(n)||n.register(r),r}const s=e.stage;s.innerHTML="";const o=document.createElement("canvas");o.setAttribute("part","stage"),a(o,r,e);const l=o.getContext("2d");return o.addEventListener("mousemove",this._mousemoveHandler,!1),o.addEventListener("touchstart",this._mouseDownUpHandler,{passive:!0}),o.addEventListener("touchmove",this._mouseDownUpHandler,{passive:!0}),o.addEventListener("touchend",this._mouseDownUpHandler,{passive:!0}),o.addEventListener("click",this._mouseDownUpHandler,!1),o.addEventListener("mousedown",this._mouseDownUpHandler,!1),o.addEventListener("mouseup",this._mouseDownUpHandler,!1),s.appendChild(o),i.set(e,{context:l,transformMatrix:t.Matrix2D.identity,offset:t.Utils.offsetRect(o),screenInverseMatrix:t.Matrix2D.identity}),t.Utils.isNull(n)||n.register(o),o}dispose(e){const r=this._scenes;if(r.has(e)){var i=r.get(e).context.canvas;const a=this._dragger;t.Utils.isNull(a)||a.unregister(i),i.removeEventListener("click",this._mouseDownUpHandler,!1),i.removeEventListener("touchend",this._mouseDownUpHandler,!1),i.removeEventListener("mousedown",this._mouseDownUpHandler,!1),i.removeEventListener("mouseup",this._mouseDownUpHandler,!1),i.removeEventListener("touchstart",this._mouseDownUpHandler),i.removeEventListener("mousemove",this._mousemoveHandler,!1),i.remove(),r.delete(e)}}_requestDraw(t){const e=this._handles;e.has(t)&&cancelAnimationFrame(e.get(t));e.set(t,(()=>(this.draw(t),requestAnimationFrame(()=>{})))())}#s;draw(e){const r=this._scenes,i=this._handles;if(!t.Utils.isNull(e)){if(e.adapter!==this)return void(r.has(e)&&(r.delete(e),i.get(e)));if(!r.has(e))return void this.initialize(e);i.has(e)&&cancelAnimationFrame(i.get(e));const a=this._hitTarget,n=e.datasource||[];this._hitTarget=null;const s=r.get(e),o=s.context,l=o.canvas;this.#s=getComputedStyle(l),o.resetTransform(),o.clearRect(0,0,l.width,l.height);const c=s.transformMatrix;o.setTransform(c);const h=this._pointer,d=s.offset,m={x:h.page.x-d.x,y:h.page.y-d.y};for(let t of n)this._draw(e,o,t,{transformMatrix:c},m);const p=this._hitTarget;p!=a&&(t.Utils.isNull(a)||(a instanceof Element&&a.dispatchEvent(new t.Drawing.DrawableEvent("out",a,this._scopeEvent,c)),e.dispatchEvent(new t.Drawing.DrawableEvent("itemout",a,this._scopeEvent,c))),t.Utils.isNull(p)||(p instanceof Element&&p.dispatchEvent(new t.Drawing.DrawableEvent("over",p,this._scopeEvent,c)),e.dispatchEvent(new t.Drawing.DrawableEvent("itemover",p,this._scopeEvent,c))))}}_draw(e,r,n,s,o){if(n.stage??=e,t.Drawing.isDrawable(n)&&n.hide)return;let l;t.Drawing.isUiObject(n)&&n.draggable&&!n.hide&&!n.inert&&a(n,i,r.getTransform().inverse()),t.Drawing.isUiObject(n)&&(l=n.transformMatrix,t.Utils.isNull(l)||t.Matrix2D.isIdentity(l)||r.transform(l.a,l.b,l.c,l.d,l.e,l.f));let c=s;if(t.Drawing.isPresentationObject(n)&&(c=t.Drawing.PresentationState.combine(n,s,r.getTransform()),this._setPresentationState(r,c)),t.Drawing.isShape(n)||n instanceof t.Components.Drawing.ShapeElement)this._drawShape(r,n,o);else if(t.Drawing.isText(n)||n instanceof t.Components.Drawing.PacemTextElement)this._drawText(r,n,o);else if(t.Drawing.isImage(n)||n instanceof t.Components.Drawing.PacemImageElement)this._drawImage(r,n,o);else if(t.Drawing.isGroup(n)||n instanceof t.Components.Drawing.PacemGroupElement)for(let t of n.childDrawables||[])this._draw(e,r,t,c,o);t.Drawing.isUiObject(n)&&n.draggable&&!n.hide&&!n.inert&&a(n,"pacem:2d-world-matrix",r.getTransform().inverse()),this._setPresentationState(r,s)}_setPresentationState(e,r){if(e.setTransform(r.transformMatrix),t.Utils.isNullOrEmpty(r.stroke)||s(r.stroke)?e.strokeStyle="transparent":e.strokeStyle=r.stroke,t.Utils.isNullOrEmpty(r.lineWidth)?e.lineWidth=0:e.lineWidth=r.lineWidth,t.Utils.isNullOrEmpty(r.dashArray)?e.setLineDash([]):e.setLineDash(r.dashArray),t.Utils.isNullOrEmpty(r.lineCap)?e.lineCap="butt":e.lineCap=r.lineCap,t.Utils.isNullOrEmpty(r.lineJoin)?e.lineJoin="miter":e.lineJoin=r.lineJoin,"object"!=typeof r.fill||t.Utils.isNullOrEmpty(r.fill))t.Utils.isNullOrEmpty(r.fill)||"string"!=typeof r.fill||s(r.fill)?e.fillStyle="transparent":e.fillStyle=r.fill;else{const{stops:i}=r.fill;let a;if(t.Drawing.isLinearGradient(r.fill)){const{start:t,end:i}=r.fill;a=e.createLinearGradient(t.x,t.y,i.x,i.y)}else{if(!t.Drawing.isRadialGradient(r.fill))throw new Error("Unmanaged gradient type.");{const{center:t,radius:i}=r.fill;a=e.createRadialGradient(t.x,t.y,i,t.x,t.y,i)}}for(let t of i)a.addColorStop(t.offset,t.color);e.fillStyle=a}t.Utils.isNullOrEmpty(r.opacity)?e.globalAlpha=1:e.globalAlpha=r.opacity}_drawImage(e,r,i){const s="pacem:2d-canvas-imagesrc";let l=n(r,s);const c=()=>{let a=l.naturalWidth,n=l.naturalHeight,s=r.width,c=r.height;if(s>0&&c>0||(s>0?c=n*s/a:c>0?s=a*c/n:(s=a,c=n)),!this._dragging&&!r.inert&&!t.Utils.isNull(i)){const t=new Path2D(`M ${r.x} ${r.y} h ${s} v ${c} H ${r.x} Z`);e.isPointInPath(t,i.x,i.y)&&(this._hitTarget=r)}e.globalAlpha=o(r.opacity,1),e.drawImage(l,r.x,r.y,s,c)};t.Utils.isNull(l)?(l=new Image,l.src=r.src,l.onload=()=>{a(r,s,l),c()}):c()}_drawText(e,r,i){const a=this.DefaultShapeValues,n=e.fillStyle=o(r.color,a.stroke),l=(e.getTransform(),r.fontSize>0?`${r.fontSize}px`:this.#s.fontSize),c=r.fontStyle||this.#s.fontStyle,h=r.fontWeight||this.#s.fontWeight;e.font=`${c} ${h} ${l} ${r.fontFamily??this.#s.fontFamily}`,e.textAlign="middle"===r.textAnchor?"center":r.textAnchor,e.fillText(r.text,r.anchor.x,r.anchor.y),e.globalAlpha=o(r.opacity,1);const d=!s(n);if(!this._dragging&&!r.inert&&!t.Utils.isNull(i)){const t=e.measureText(r.text),a=t.width,n=t.actualBoundingBoxAscent+t.actualBoundingBoxDescent,s=r.anchor.x-t.actualBoundingBoxLeft,o=r.anchor.y-t.actualBoundingBoxAscent,l=new Path2D(`M ${s} ${o} h ${a} v ${n} H ${s} z`);d&&e.isPointInPath(l,i.x,i.y)&&(this._hitTarget=r)}}_drawShape(e,r,i){if(t.Utils.isNullOrEmpty(r?.pathData))return;e.beginPath();const a="string"!=typeof e.fillStyle||!s(e.fillStyle),n="string"!=typeof e.strokeStyle||!s(e.strokeStyle);var o=new Path2D(r.pathData);this._dragging||r.inert||t.Utils.isNull(i)||(a&&e.isPointInPath(o,i.x,i.y)||n&&e.isPointInStroke(o,i.x,i.y))&&(this._hitTarget=r),n&&e.stroke(o),a&&e.fill(o);const l=!t.Utils.isNullOrEmpty(r.vertices)&&r.vertices.length>1,c=!t.Utils.isNull(r.markerEnd),h=!t.Utils.isNull(r.markerStart),d=!t.Utils.isNull(r.markerMid);if((c||d||h)&&(l||this.log(t.Logging.LogLevel.Warn,"Not enough vertices were explicited in order to make markers renderable.")),l){const t=e.getTransform();if(h){const t=r.markerEnd,i=r.vertices[1],a=r.vertices[0],n=Math.atan2(a.y-i.y,a.x-i.x);this._drawMarker(e,t,a,n)}if(d){const i=r.markerEnd;for(let a=1;a<r.vertices.length-1;a++){e.setTransform(t);const n=r.vertices[a],s=r.vertices[a+1],o=Math.atan2(s.y-n.y,s.x-n.x);this._drawMarker(e,i,s,o)}}if(c){e.setTransform(t);const i=r.markerEnd,a=r.vertices[r.vertices.length-2],n=r.vertices[r.vertices.length-1],s=Math.atan2(n.y-a.y,n.x-a.x);this._drawMarker(e,i,n,s)}}}_drawMarker(e,r,i,a){const n=this.DefaultShapeValues,l=r.ref?.x||0,c=r.ref?.y||0,h=(r.width||1)*e.lineWidth,d=(r.width||1)*e.lineWidth;let m=r.viewbox,p={x:0,y:0,width:h,height:d};t.Utils.isNull(m)&&(m=p);const u={a:p.width/m.width,d:p.height/m.height};e.translate(i.x,i.y),e.rotate(a),e.scale(u.a,u.d),e.translate(-l,-c),e.fillStyle=o(r.fill,n.fill),e.strokeStyle=o(r.stroke,n.stroke);const g=!s(r.fill),v=!s(r.stroke);var y=new Path2D(r.pathData);g&&e.fill(y),v&&e.stroke(y)}};l=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-canvas-adapter"})],l),e.PacemCanvasAdapterElement=l}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){const r="http://www.w3.org/2000/svg",i="pacem:2-svg-drawable",a="pacem:2d-svg-stage",n=t.CustomElementUtils.getAttachedPropertyValue,s=t.CustomElementUtils.setAttachedPropertyValue,o=t.CustomElementUtils.deleteAttachedPropertyValue;function l(e,r){return t.Utils.isNull(e)?r:e}function c(t,e,r){return r>=t.children.length?(t.appendChild(e),null):t.replaceChild(e,t.children.item(r))}let h=class PacemSvgAdapterElement extends e.Pacem2DAdapterElement{constructor(){super(...arguments),this._hitTarget=null,this._dragInitHandler=r=>{const a=r.detail,s=a.element,o=n(s,i),l=o.stage.transformMatrix,c=o.transformMatrix??t.Matrix2D.identity;a.data={stageTransformMatrix:l,item:o,initialTransformMatrix:c};e.AdapterUtils.itemDispatch(o,r,{x:0,y:0})&&r.preventDefault()},this._draggingHandler=r=>{t.avoidHandler(r),this._dragging=!0;const i=r.detail.element,a=r.detail.data,n=r.detail,s=(n.currentPosition.x-n.origin.x)*a.stageTransformMatrix.a,o=(n.currentPosition.y-n.origin.y)*a.stageTransformMatrix.d,l=s+a.initialTransformMatrix.e,c=o+a.initialTransformMatrix.f,h={x:s+a.stageTransformMatrix.e,y:o+a.stageTransformMatrix.f};if(!e.AdapterUtils.itemDispatch(a.item,r,h)){const t=a.initialTransformMatrix;i.style.transform=`matrix(${t.a},${t.b},${t.c},${t.d},${l},${c})`}},this._dragEndHandler=r=>{this._dragging=!1;const i=r.detail,a=i.element,n=i.data,s=t.Utils.deserializeTransform(a.style),o={x:s.e,y:s.f};if(n.item instanceof t.Components.Drawing.UiElement)n.item.translateX=o.x,n.item.translateY=o.y;else{const e=n.initialTransformMatrix,r={a:e.a,b:e.b,c:e.c,d:e.d,e:o.x,f:o.y};t.Utils.extend(n.item,{transformMatrix:r})}a.style.transform="",e.AdapterUtils.itemDispatch(n.item,r,o)},this._mousemoveHandler=r=>{var s=t.CustomEventUtils.getEventCoordinates(r).client;if(!this._dragging){var o=null;r.target.getRootNode().elementsFromPoint(s.x,s.y).find(t=>(o=n(t,i))&&!o.inert);var l=this._hitTarget,c=o;(t.Utils.isNull(o&&o.stage)||!this._scenes.has(o.stage)||o.inert)&&(c=null);const h=this._hitTarget=c;if(c!==l&&(t.Utils.isNull(l)||(this._dragger.unregister(this._items.get(l)),e.AdapterUtils.itemDispatch(l,"out",r)),t.Utils.isNull(c)||(c.draggable&&this._dragger.register(this._items.get(c)),e.AdapterUtils.itemDispatch(c,"over",r))),t.Utils.isNull(h)){const i=r.currentTarget,s=n(i,a);t.Utils.isNull(s)||e.AdapterUtils.stageDispatch(s,"move",r)}}},this._mouseDownUpHandler=r=>{const i=r.currentTarget;if(i instanceof SVGSVGElement){const s=n(i,a),o=this._hitTarget,l=r.type.replace(/^mouse/,"");t.Utils.isNull(o)||o.stage!==s?e.AdapterUtils.stageDispatch(s,l,r):e.AdapterUtils.itemDispatch(this._hitTarget,l,r)}},this._scenes=new WeakMap,this._markers=new WeakMap,this._gradients=new WeakMap,this._items=new WeakMap}snapshot(t,e,r,i){if(this._scenes.has(t)){const a=this._scenes.get(t);return this.snapshotElement(a,e,r,i)}return Promise.resolve(null)}getTransformMatrix(e){const r=this._scenes;return r.has(e)?r.get(e).getScreenCTM().inverse():t.Matrix2D.identity}viewActivatedCallback(){super.viewActivatedCallback();const e=this._dragger=document.createElement(t.P+"-drag-drop");e.mode=t.UI.DragDataMode.Self;t.CustomElementUtils.findAncestorShell(this).appendChild(e),e.addEventListener(t.UI.DragDropEventType.Init,this._dragInitHandler,!1),e.addEventListener(t.UI.DragDropEventType.Drag,this._draggingHandler,!1),e.addEventListener(t.UI.DragDropEventType.End,this._dragEndHandler,!1)}disconnectedCallback(){const e=this._dragger;t.Utils.isNull(e)||(e.removeEventListener(t.UI.DragDropEventType.Init,this._dragInitHandler,!1),e.removeEventListener(t.UI.DragDropEventType.Drag,this._draggingHandler,!1),e.removeEventListener(t.UI.DragDropEventType.End,this._dragEndHandler,!1),e.remove()),super.disconnectedCallback()}invalidateSize(r,i){const a=this._scenes;if(!t.Utils.isNull(r)&&!t.Utils.isNullOrEmpty(i)&&a.has(r)){var n=a.get(r);n.setAttribute("width",i.width+""),n.setAttribute("height",i.height+"");const s=r.viewbox,o=r.aspectRatio;e.AdapterUtils.isValidViewbox(s)?n.setAttribute("viewBox",`${s.x} ${s.y} ${s.width} ${s.height}`):n.removeAttribute("viewBox"),t.Utils.isNullOrEmpty(o)||"string"==typeof o?n.removeAttribute("preserveAspectRatio"):n.setAttribute("preserveAspectRatio",`xM${o.x.substring(1)}YM${o.y.substring(1)} ${o.slice?"slice":"meet"}`)}}initialize(e){if(t.Utils.isNull(e))throw"Provided scene is null or undefined.";const i=this._scenes;if(i.has(e))return i.get(e);const n=e.stage;n.innerHTML="",this._items=new WeakMap;var o=document.createElementNS(r,"svg");o.setAttribute("part","stage"),s(o,a,e),n.appendChild(o),i.set(e,o);return o.addEventListener("mousemove",this._mousemoveHandler,!1),o.addEventListener("click",this._mouseDownUpHandler,!1),o.addEventListener("mousedown",this._mouseDownUpHandler,!1),o.addEventListener("mouseup",this._mouseDownUpHandler,!1),o}dispose(t){const e=this._scenes;if(e.has(t)){var r=e.get(t);r.removeEventListener("mousemove",this._mousemoveHandler),r.removeEventListener("click",this._mouseDownUpHandler),r.removeEventListener("mousedown",this._mouseDownUpHandler),r.removeEventListener("mouseup",this._mouseDownUpHandler),o(r,a),r.remove(),e.delete(t)}}getHitTarget(t){return this._hitTarget}draw(e,r,i=!1){const a=this._scenes,n=this._items;if(!t.Utils.isNull(e))if(e.adapter===this){a.has(e)||this.initialize(e);var s=e.datasource,o=!0,l=a.get(e);!t.Utils.isNull(r)&&n.has(r)&&(s=[r],l=n.get(r).parentNode,o=!1),o&&(l.innerHTML="<defs></defs>",this._markers=new WeakMap),this._draw(e,l,s||[],o,i)}else a.has(e)&&a.delete(e)}_hasItems(e){return t.Drawing.isGroup(e)}_disposeSvg(e){if(!t.Utils.isNull(e)){var r=n(e,i);o(e,i),this._items.delete(r)}}_draw(e,r,a,n,o){const h=this._items;let d=0;if(r.firstElementChild instanceof SVGDefsElement&&d++,!t.Utils.isNullOrEmpty(a))for(let m of a){let a;if(m.stage??=e,h.has(m)?(a=h.get(m),a.parentNode!==r&&this._disposeSvg(c(r,a,d))):(a=this._buildSVGElement(m),s(a,i,m),this._disposeSvg(c(r,a,d)),h.set(m,a)),t.Drawing.isDrawable(m)&&(m.hide?a.setAttribute("display","none"):a.removeAttribute("display"),a.style.transform=""),t.Drawing.isShape(m)){const t=a;t.setAttribute("d",l(m.pathData,"M0,0"));for(let{marker:e,suffix:i}of[{marker:m.markerStart,suffix:"start"},{marker:m.markerEnd,suffix:"end"},{marker:m.markerMid,suffix:"mid"}])if(e){const a=this._ensureMarker(r,e);t.setAttribute("marker-"+i,`url(#${a.id})`)}else t.removeAttribute("marker-"+i)}else if(t.Drawing.isText(m)){const e=a;e.textContent=m.text,e.style.fill=t.Utils.isNullOrEmpty(m.color)?"":m.color,e.style.fontFamily=t.Utils.isNullOrEmpty(m.fontFamily)?"":m.fontFamily,e.style.fontSize=t.Utils.isNull(m.fontSize)?"":m.fontSize+"px",t.Utils.isNullOrEmpty(m.fontWeight)||(e.style.fontWeight=m.fontWeight),t.Utils.isNullOrEmpty(m.fontStyle)||(e.style.fontStyle=m.fontStyle),e.setAttribute("text-anchor",l(m.textAnchor,"start")),t.Utils.isNull(m.anchor)?(e.removeAttribute("x"),e.removeAttribute("y")):(e.setAttribute("x",m.anchor.x.toString()),e.setAttribute("y",m.anchor.y.toString()))}else if(t.Drawing.isImage(m)){const e=a;e.setAttribute("href",m.src),e.setAttribute("preserveAspectRatio","none"),m.width>0?e.setAttribute("width",""+m.width):e.removeAttribute("width"),m.height>0?e.setAttribute("height",""+m.height):e.removeAttribute("height"),t.Utils.isNull(m.x)?e.removeAttribute("x"):e.setAttribute("x",""+m.x),t.Utils.isNull(m.y)?e.removeAttribute("y"):e.setAttribute("y",""+m.y)}if(t.Drawing.isUiObject(m)){const e=m.transformMatrix;t.Utils.isNull(e)||t.Matrix2D.isIdentity(e)?a.removeAttribute("transform"):a.setAttribute("transform",`matrix(${e.a} ${e.b} ${e.c} ${e.d} ${e.e} ${e.f})`);const r=l(m.opacity,1);1===r?a.removeAttribute("opacity"):a.setAttribute("opacity",""+r)}if(t.Drawing.isPresentationObject(m)){if(t.Utils.isNullOrEmpty(m.fill))a.removeAttribute("fill");else if("string"==typeof m.fill)a.setAttribute("fill",m.fill);else{const t=this._ensureGradient(r,m.fill);a.setAttribute("fill",`url(#${t.id})`)}t.Utils.isNullOrEmpty(m.stroke)?a.removeAttribute("stroke"):a.setAttribute("stroke",m.stroke),t.Utils.isNullOrEmpty(m.dashArray)?a.removeAttribute("stroke-dasharray"):a.setAttribute("stroke-dasharray",m.dashArray.join(" ")),t.Utils.isNullOrEmpty(m.lineCap)?a.removeAttribute("stroke-linecap"):a.setAttribute("stroke-linecap",m.lineCap),t.Utils.isNullOrEmpty(m.lineJoin)?a.removeAttribute("stroke-linejoin"):a.setAttribute("stroke-linejoin",m.lineJoin),t.Utils.isNullOrEmpty(m.lineWidth)?a.removeAttribute("stroke-width"):a.setAttribute("stroke-width",""+m.lineWidth)}m.inert?a.style.pointerEvents="none":a.style.pointerEvents="",(n||o)&&this._hasItems(m)&&this._draw(e,a,m.childDrawables,!0,o),d++}if(n)for(let t=r.children.length-1;t>=d;t--){const e=r.children.item(t);this._disposeSvg(e),e.remove()}}_buildSVGElement(e){return t.Drawing.isShape(e)||e instanceof t.Components.Drawing.ShapeElement?document.createElementNS(r,"path"):t.Drawing.isText(e)||e instanceof t.Components.Drawing.PacemTextElement?document.createElementNS(r,"text"):t.Drawing.isImage(e)||e instanceof t.Components.Drawing.PacemImageElement?document.createElementNS(r,"image"):document.createElementNS(r,"g")}_ensureGradient(e,i){const a=this._gradients;a.has(e)||a.set(e,new WeakMap);const n=a.get(e),s=t.Drawing.isLinearGradient(i),o=t.Drawing.isRadialGradient(i);if(n.has(i)){const t=n.get(i);(s&&t instanceof SVGLinearGradientElement||o&&t instanceof SVGRadialGradientElement)&&(t.remove(),n.delete(i))}if(!n.has(i)){let a,o=e;for(;t.Utils.isNull(a=o.querySelector(":scope > defs"));){const t=o.parentElement;if(!(t instanceof SVGElement))break;o=t}if(t.Utils.isNull(a))throw new Error("Must provide a <defs> element.");var l=null;if(s)l=document.createElementNS(r,"linearGradient");else{if(!t.Drawing.isRadialGradient(i))throw new Error("Unmanaged gradient type.");l=document.createElementNS(r,"radialGradient")}l.setAttribute("gradientUnits","userSpaceOnUse"),l.setAttribute("id",`grad-${t.Utils.uniqueCode()}`),a.appendChild(l),n.set(i,l)}const c=n.get(i);s?(c.setAttribute("x1",i.start.x.toString()),c.setAttribute("y1",i.start.y.toString()),c.setAttribute("x2",i.end.x.toString()),c.setAttribute("y2",i.end.y.toString())):o&&(c.setAttribute("cx",i.center.x.toString()),c.setAttribute("cy",i.center.y.toString()),c.setAttribute("r",i.radius.toString()));let h=0;for(let e of i.stops){for(;c.children.length<=h;){const t=document.createElementNS(r,"stop");c.appendChild(t)}const i=c.children.item(h);i.setAttribute("offset",100*e.offset+"%"),i.setAttribute("stop-color",e.color),t.Utils.isNull(e.opacity)||i.setAttribute("stop-opacity",e.opacity.toString()),h++}for(;c.children.length>i.stops.length;){const t=c.children.item(c.children.length-1);c.removeChild(t)}return c}_ensureMarker(e,i){const a=this._markers;a.has(e)||a.set(e,new WeakMap);const n=a.get(e);if(!n.has(i)){const a=document.createElementNS(r,"marker");n.set(i,a);const s=document.createElementNS(r,"path");a.appendChild(s),a.setAttribute("id","mark"+t.Utils.uniqueCode());let o,l=e;for(;t.Utils.isNull(o=l.querySelector(":scope > defs"));){const t=l.parentElement;if(!(t instanceof SVGElement))break;l=t}if(t.Utils.isNull(o))throw new Error("Must provide a <defs> element.");o.appendChild(a)}const s=n.get(i),o=s.firstElementChild;return s.setAttribute("orient","auto-start-reverse"),t.Utils.isNullOrEmpty(i.viewbox)?s.removeAttribute("viewBox"):s.setAttribute("viewBox",`${i.viewbox.x} ${i.viewbox.y} ${i.viewbox.width} ${i.viewbox.height}`),t.Utils.isNullOrEmpty(i.ref)?(s.removeAttribute("refX"),s.removeAttribute("refY")):(s.setAttribute("refX",i.ref.x.toString()),s.setAttribute("refY",i.ref.y.toString())),i.height>0?s.setAttribute("markerHeight",i.height.toString()):s.removeAttribute("markerHeight"),i.width>0?s.setAttribute("markerWidth",i.width.toString()):s.removeAttribute("markerWidth"),o.setAttribute("d",i.pathData),t.Utils.isNullOrEmpty(i.fill)?o.removeAttribute("fill"):o.setAttribute("fill",i.fill),t.Utils.isNullOrEmpty(i.stroke)?o.removeAttribute("stroke"):o.setAttribute("stroke",i.stroke),s}};h=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-svg-adapter"})],h),e.PacemSvgAdapterElement=h}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={}));
+"use strict";var Pacem,__decorate=this&&this.__decorate||function(t,e,r,i){var a,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(s=(n<3?a(s):n>3?a(e,r,s):a(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s};!function(t){!function(e){function r(e){return!t.Utils.isNull(e)&&"stage"in e}function i(t){return r(t)}function a(e){return"stops"in e&&t.Utils.isArray(e.stops)}e.isDrawable=r,e.isUiObject=i,e.isLinearGradient=function(e){return a(e)&&"start"in e&&t.Point.isPoint(e.start)&&"end"in e&&t.Point.isPoint(e.end)},e.isRadialGradient=function(e){return a(e)&&"center"in e&&t.Point.isPoint(e.center)&&"radius"in e&&"number"==typeof e.radius};e.PresentationState=class PresentationState{static combine(e,r,i=null){return{opacity:(e.opacity??1)*(r.opacity??1),transformMatrix:i??t.Matrix2D.multiply(r.transformMatrix,e.transformMatrix),dashArray:e.dashArray??r.dashArray,fill:e.fill??r.fill,lineCap:e.lineCap??r.lineCap,lineJoin:e.lineJoin??r.lineJoin,lineWidth:e.lineWidth??r.lineWidth,stroke:e.stroke??r.stroke}}},e.isPresentationObject=function(t){return i(t)&&("fill"in t||"transformMatrix"in t||"stroke"in t||"lineJoin"in t||"dashArray"in t||"lineWidth"in t||"opacity"in t||"lineCap"in t)},e.isShape=function(t){return i(t)&&"pathData"in t},e.isGroup=function(e){return i(e)&&"childDrawables"in e&&!t.Utils.isNullOrEmpty(e.childDrawables)},e.isText=function(t){return i(t)&&"text"in t&&"string"==typeof t.text},e.isImage=function(t){return i(t)&&"src"in t&&"string"==typeof t.src};class UI2DEvent extends t.CustomUIEvent{constructor(t,e,r,i){super(t,e,r),this.#t=i}#t;get transformMatrix(){return this.#t}project(e={x:this.screenX,y:this.screenY}){return t.Matrix2D.multiply(e,this.#t)}}e.UI2DEvent=UI2DEvent;e.Shape=class Shape{static empty(){return{pathData:"",vertices:[],boundingRect:{x:0,y:0,width:0,height:0}}}};e.DragEvent=class DragEvent extends UI2DEvent{};e.DrawableEvent=class DrawableEvent extends UI2DEvent{constructor(t,e,r,i){super(t,{detail:e,bubbles:!0,cancelable:!0},r,i)}};e.StageEvent=class StageEvent extends UI2DEvent{constructor(t,e,r,i=e.transformMatrix){super(t,{detail:e,bubbles:!0,cancelable:!0},r,i)}}}(t.Drawing||(t.Drawing={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(r){r.TAG_MIDDLE_NAME="2d",r.TWO_PI=2*Math.PI;const i=Math.PI/180;class Pacem2DAdapterElement extends e.PacemEventTarget{constructor(){super(...arguments),this.DefaultShapeValues={stroke:"#000",lineWidth:1,fill:"#fff"}}snapshotElement(e,r,i,a){const n=!t.Utils.isNullOrEmpty(r),s=i??(n?"image/jpeg":null),o=a??(n?.9:null);return t.Utils.snapshotElement(e,r,s,o)}}r.Pacem2DAdapterElement=Pacem2DAdapterElement;class DrawableElement extends e.PacemCrossItemsContainerElement{validate(t){return!1}findContainer(){return this.parent||this.stage}get stage(){return this._scene=this._scene||t.CustomElementUtils.findAncestorOfType(this,r.Pacem2DElement)}get parent(){return this._drawableParent=this._drawableParent||t.CustomElementUtils.findAncestor(this,t=>t instanceof DrawableElement)}disconnectedCallback(){delete this._scene,delete this._drawableParent,super.disconnectedCallback()}propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i&&"hide"===t)this.stage?.draw(this)}}__decorate([t.Watch({emit:!1,reflectBack:!0,converter:t.PropertyConverters.String})],DrawableElement.prototype,"tag",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Boolean})],DrawableElement.prototype,"inert",void 0),r.DrawableElement=DrawableElement;class UiElement extends DrawableElement{#t=t.Matrix2D.identity;viewActivatedCallback(){super.viewActivatedCallback(),this._updateTransformMatrix()}propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"rotate":case"scaleX":case"scaleY":case"translateX":case"translateY":this._updateTransformMatrix();case"opacity":this.stage?.draw(this)}}_updateTransformMatrix(){let t=i*(this.rotate??0),e=Math.cos(t),r=Math.sin(t),a=(this.scaleX??1)*e,n=-r,s=r,o=(this.scaleY??1)*e,l=this.translateX??0,c=this.translateY??0;this.#t={a:a,b:n,c:s,d:o,e:l,f:c}}get transformMatrix(){const t=this.#t;return{a:t.a,b:t.b,c:t.c,d:t.d,e:t.e,f:t.f}}}__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"rotate",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"scaleX",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"scaleY",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"translateX",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"translateY",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],UiElement.prototype,"opacity",void 0),r.UiElement=UiElement;class PresentationElement extends UiElement{propertyChangedCallback(e,r,i,a){if(super.propertyChangedCallback(e,r,i,a),!a)switch(e){case"stroke":case"lineWidth":case"lineJoin":case"lineCap":case"dashArray":case"fill":t.Utils.isNull(this.stage)||this.stage.draw(this)}}}__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],PresentationElement.prototype,"stroke",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],PresentationElement.prototype,"fill",void 0),__decorate([t.Watch({emit:!1,converter:{convert:t=>t?.split(",").map(t=>parseInt(t)).filter(t=>!Number.isNaN(t)),convertBack:t=>t?.join(",")}})],PresentationElement.prototype,"dashArray",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],PresentationElement.prototype,"lineWidth",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],PresentationElement.prototype,"lineJoin",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],PresentationElement.prototype,"lineCap",void 0),r.PresentationElement=PresentationElement;class ShapeElement extends PresentationElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i&&"data"===t)this.stage?.draw(this)}viewActivatedCallback(){super.viewActivatedCallback(),this.recomputeShape()}recomputeShape(){const{pathData:t,vertices:e,boundingRect:r}=this.getShapeGeometry();this.#e=e,this.#r=r,this.data=t}get pathData(){return this.data}#r;get boundingRect(){return this.#r}#e;get vertices(){return this.#e}}__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],ShapeElement.prototype,"data",void 0),r.ShapeElement=ShapeElement}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){var r,i;function a(e,r,i,a,n){for(a??=0,n??=0,a%=360,n%=360;a<0;)a+=360;for(;n<a;)n+=360;return(a-n).isCloseTo(0)?function(t,e,r){const i=2*e,a=t.x,n=t.y;return{pathData:`M ${a} ${n} m ${-e},0 a ${e},${r} 0 1,1 ${i},0 a ${e},${r} 0 1,1 ${-i},0`,vertices:[],boundingRect:{x:a-e,y:n-r,width:2*e,height:2*r}}}(e,r,i):function(e,r,i,a,n){const s=Math.PI/180,o=s*a,l=s*n,c=t=>r*i/Math.sqrt(Math.pow(Math.cos(t)*i,2)+Math.pow(Math.sin(t)*r,2)),h=c(o),d=c(l),m=(t,e)=>({x:t*Math.cos(e),y:t*Math.sin(e)}),p=m(h,o),u=m(d,l),g={x:e.x+p.x,y:e.y+p.y},v={x:e.x+u.x,y:e.y+u.y};let y=t.Rect.expand(e,g,v);n<a&&(n+=360),(a<=0&&n>0||n>=360)&&(y=t.Rect.expand(y,{x:e.x+r,y:e.y})),(a<=90&&n>90||n>=450)&&(y=t.Rect.expand(y,{x:e.x,y:e.y+i})),(a<=180&&n>180||n>=540)&&(y=t.Rect.expand(y,{x:e.x-r,y:e.y})),(a<=270&&n>270||n>=630)&&(y=t.Rect.expand(y,{x:e.x,y:e.y-i}));const f=l-o>Math.PI?"1":"0";return{pathData:`M ${g.x} ${g.y} A ${r},${i} 0 ${f},1 ${v.x},${v.y} L ${e.x},${e.y} Z`,vertices:[g,v],boundingRect:y}}(e,r,i,a,n)}let n=r=class PacemEllipseElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"center":case"rx":case"ry":case"start":case"end":this.recomputeShape()}}getPathData(){const e=this.rx,i=this.ry,a=this.center,n=this.start??0,s=this.end??0;return t.Utils.isNull(a)||t.Utils.isNull(e)||t.Utils.isNull(i)?null:r.getPathData(a,e,i,n,s)}getShapeGeometry(){return a(this.center??{x:0,y:0},this.rx??0,this.ry??0,this.start,this.end)}static getPathData(t={x:NaN,y:NaN},e=NaN,r=NaN,i,n){const{pathData:s}=a(t,e,r,i,n);return s}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],n.prototype,"center",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],n.prototype,"rx",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],n.prototype,"ry",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],n.prototype,"start",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],n.prototype,"end",void 0),n=r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-ellipse"})],n),e.PacemEllipseElement=n;let s=i=class PacemCircleElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"center":case"radius":case"start":case"end":this.recomputeShape()}}getPathData(){const e=this.radius,r=this.center;return t.Utils.isNull(r)||t.Utils.isNull(e)?null:i.getPathData(r,e,this.start,this.end)}getShapeGeometry(){const t=this.center??{x:0,y:0},e=this.radius??0;return a(t,e,e,this.start,this.end)}static getPathData(t={x:NaN,y:NaN},e=NaN,r,i){return n.getPathData(t,e,e,r,i)}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],s.prototype,"center",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],s.prototype,"radius",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],s.prototype,"start",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],s.prototype,"end",void 0),s=i=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-circle"})],s),e.PacemCircleElement=s}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){let r=class PacemGroupElement extends e.PresentationElement{validate(t){return t instanceof e.DrawableElement&&t.parent===this}#i=[];get childDrawables(){return this.#i}propertyChangedCallback(e,r,i,a){switch(super.propertyChangedCallback(e,r,i,a),e){case"items":case"datasource":this.#i=i||[];const e=this.stage;t.Utils.isNull(e)||e.draw(this,!0)}}};__decorate([t.Watch({emit:!1})],r.prototype,"datasource",void 0),r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-group"})],r),e.PacemGroupElement=r}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){let r=class PacemImageElement extends e.UiElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"src":case"x":case"y":case"width":case"height":this.stage?.draw(this)}}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"src",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],r.prototype,"x",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],r.prototype,"y",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],r.prototype,"width",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],r.prototype,"height",void 0),r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-image"})],r),e.PacemImageElement=r}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){var r;let i=r=class PacemLineElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"from":case"to":this.recomputeShape()}}getShapeGeometry(){const e=this.from,r=this.to;if(t.Utils.isNull(e)||t.Utils.isNull(r))return t.Drawing.Shape.empty();const i=e.x,a=e.y,n=r.x,s=r.y,o={x:Math.min(i,n),y:Math.min(a,s),width:Math.abs(i-n),height:Math.abs(a-s)};return{pathData:this.getPathData(),vertices:[e,r],boundingRect:o}}getPathData(){const e=this.from,i=this.to;return t.Utils.isNull(e)||t.Utils.isNull(i)?null:r.getPathData(e,i)}static getPathData(t={x:NaN,y:NaN},e={x:NaN,y:NaN}){return`M ${t.x} ${t.y} L ${e.x} ${e.y}`}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],i.prototype,"from",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],i.prototype,"to",void 0),i=r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-line"})],i),e.PacemLineElement=i}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){let r=class PacemPathElement extends e.ShapeElement{constructor(){super(...arguments),this.getPathData=()=>this.d}propertyChangedCallback(t,e,r,i){super.propertyChangedCallback(t,e,r,i),"d"!==t||i||this.recomputeShape()}getShapeGeometry(){return{pathData:this.getPathData(),boundingRect:null,vertices:[]}}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"d",void 0),r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-path"})],r),e.PacemPathElement=r}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){var r;let i=r=class PacemPolygonElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"radius":case"starIndent":case"sides":this.recomputeShape()}}getPathData(){const e=this.sides,i=this.radius,a=this.center;return t.Utils.isNull(e)||t.Utils.isNull(i)?null:r.getPathData(a,i,e,this.starIndent)}getShapeGeometry(){const e=this.center??{x:0,y:0},i=this.radius??0,a=this.sides??3,n=this.starIndent;return a<3?t.Drawing.Shape.empty():r.getShapeGeometry(e,i,a,n)}static getShapeGeometry(t,e,r,i=0){const a={x:t.x,y:t.y-e};let n=`M ${a.x} ${a.y}`;const s=[a],o=2*Math.PI/r,l=.5*o,c=i>0,h=e*Math.cos(l);for(let a=1;a<r;a++){const r=a*o,d=t.x+Math.sin(r)*e,m=t.y-Math.cos(r)*e;if(c){const e=h*(1-i),a=r-l,o=t.x+Math.sin(a)*e,c=t.y-Math.cos(a)*e;n+=` L ${o} ${c} L ${d} ${m}`,s.push({x:o,y:c})}else n+=` L ${d} ${m}`;s.push({x:d,y:m})}if(c){const e=h*(1-i),r=2*Math.PI-l,a=t.x+Math.sin(r)*e,o=t.y-Math.cos(r)*e;n+=` L ${a} ${o}`,s.push({x:a,y:o})}s.push(a);const d=2*e;return{pathData:n+" Z",vertices:s,boundingRect:{x:a.x-e,y:a.y,width:d,height:d}}}static getPathData(t,e,i,a=0){const{pathData:n}=r.getShapeGeometry(t,e,i,a);return n}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],i.prototype,"sides",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],i.prototype,"radius",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],i.prototype,"center",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],i.prototype,"starIndent",void 0),i=r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-polygon"})],i),e.PacemPolygonElement=i}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){var r;const i={convert:e=>{const r=t.parseAsNumericalArray(e);if(r.length%2==0){const t=[];for(let e=0;e<r.length;e+=2)t.push({x:r[e],y:r[e+1]});return t}return JSON.parse(e)},convertBack:t=>JSON.stringify(t)};let a=r=class PacemPolylineElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){if(super.propertyChangedCallback(t,e,r,i),!i)switch(t){case"points":case"closed":this.recomputeShape()}}static getShapeGeometry(e,r){if(t.Utils.isNullOrEmpty(e))return t.Drawing.Shape.empty();let i="",a=Number.MAX_VALUE,n=Number.MAX_VALUE,s=Number.MIN_VALUE,o=Number.MIN_VALUE;for(let t=0;t<e.length;t++){const{x:r,y:l}=e[t];i+=`${0===t?"M":"L"} ${r} ${l} `,a=Math.min(a,r),s=Math.max(s,r),n=Math.min(n,l),o=Math.max(o,l)}return r&&(i+="Z"),{pathData:i,vertices:e,boundingRect:{x:a,y:n,width:s-a,height:o-n}}}getShapeGeometry(){return r.getShapeGeometry(this.points,this.closed)}getPathData(){const{pathData:t}=this.getShapeGeometry();return t}static getPathData(t,e){const{pathData:i}=r.getShapeGeometry(t,e);return i}};__decorate([t.Watch({emit:!1,converter:i})],a.prototype,"points",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Boolean})],a.prototype,"closed",void 0),a=r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-polyline"})],a),e.PacemPolylineElement=a}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){var r;function i(t){const e=t[2],r=t[4]??e,i="cut"===t[6]?o.Cut:o.Rounded;return{rx:a(e),ry:a(r),type:i}}function a(t){return{value:parseFloat(t),unit:t.endsWith("%")?"pct":"u"}}function n(t){return`${t.value}${"pct"===t.unit?"%":""}`}const s=/(([\d\.]+%?)(\s*,?\s*([\d\.]+%?))?(\s+(cut|round))?)/g;let o;!function(t){t.Rounded="rounded",t.Cut="cut"}(o=e.CornerType||(e.CornerType={}));let l=r=class PacemRectElement extends e.ShapeElement{propertyChangedCallback(t,e,r,i){super.propertyChangedCallback(t,e,r,i),i||"x"!==t&&"y"!==t&&"w"!==t&&"h"!==t&&"r"!==t&&"cornerType"!==t||this.recomputeShape()}getPathData(){const e=this.x,i=this.y,a=this.w,n=this.h;let s=this.r??{rx:{value:0},ry:{value:0},type:o.Rounded};return t.Utils.isArray(s)||(s=[s,s,s,s]),s=s.map(t=>"number"==typeof t?{rx:{value:t},ry:{value:t},type:this.cornerType}:t),t.Utils.isNull(e)||t.Utils.isNull(i)||t.Utils.isNull(a)||t.Utils.isNull(n)?null:r.getPathData(e,i,a,n,s)}getShapeGeometry(){const t=this.x,e=this.y,r=t+this.w,i=e+this.h;return{pathData:this.getPathData(),vertices:[{x:t,y:e},{x:r,y:e},{x:r,y:i},{x:t,y:i}],boundingRect:{x:t,y:e,width:this.w,height:this.h}}}static getPathData(e=NaN,r=NaN,i=NaN,a=NaN,n=null){if(!n)return`M ${e} ${r} h ${i} v ${a} h ${-i} z`;t.Utils.isArray(n)||(n=[n,n,n,n]);const s=n[0],o=n[1],l=n[2],c=n[3],h=t=>"pct"===t.unit?.01*t.value*i:t.value,d=t=>"pct"===t.unit?.01*t.value*a:t.value,m=h(s.rx),p=d(s.ry),u=h(o.rx),g=d(o.ry),v=h(l.rx),y=d(l.ry),f=h(c.rx),_=d(c.ry);let x=`M ${e},${r+p}`;if("cut"===s.type)x+=` l ${m},${-p}`;else x+=` a ${m} ${p} 0 0 1 ${m} ${-p}`;if(x+=" h "+(i-m-u),"cut"===o.type)x+=` l ${u},${g}`;else x+=` a ${u} ${g} 0 0 1 ${u} ${g}`;if(x+=" v "+(a-g-y),"cut"===l.type)x+=` l ${-v},${y}`;else x+=` a ${v} ${y} 0 0 1 ${-v} ${y}`;if(x+=" h "+-(i-v-f),"cut"===c.type)x+=` l ${-f},${-_}`;else x+=` a ${f} ${_} 0 0 1 ${-f} ${-_}`;return x+" z"}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],l.prototype,"x",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],l.prototype,"y",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],l.prototype,"w",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],l.prototype,"h",void 0),__decorate([t.Watch({emit:!1,converter:{convert:t=>function(t){let e;const r=[];for(;e=s.exec(t);)r.push(e);switch(r.length){case 1:const t=i(r[0]);return[t,t,t,t];case 4:return[i(r[0]),i(r[1]),i(r[2]),i(r[3])];default:return null}}(t),convertBack:t=>function(t){const e=t[0],r=t[1],i=t[2],a=t[3];return`${n(e.rx)},${n(e.ry)} ${n(r.rx)},${n(r.ry)} ${n(i.rx)},${n(i.ry)} ${n(a.rx)},${n(a.ry)}`}(t)}})],l.prototype,"r",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],l.prototype,"cornerType",void 0),l=r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-rect"})],l),e.PacemRectElement=l}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(r){const i=/^\s*[xX]\s*([Mm](in|ax|id))\s*[yY]\s*([Mm](in|ax|id))(\s+(none|slice|meet))?\s*$/,a={convert:t=>{const e=i.exec(t);return e&&e.length>=4?{x:e[1].toLowerCase(),y:e[3].toLowerCase(),slice:"slice"===e[6]}:"none"},convertBack:e=>t.Utils.isNull(e)||"string"==typeof e?"none":`xM${e.x.substr(1)}YM${e.y.substr(1)} ${e.slice?"slice":"meet"}`},n={panControl:!0,zoomControl:!0,panModifiers:[t.EventKeyModifier.AltKey],zoomModifiers:[t.EventKeyModifier.AltKey]};let s=class Pacem2DElement extends e.PacemItemsContainerElement{constructor(){super(...arguments),this.#t=t.Matrix2D.identity,this._options=n,this._resizeHandler=e=>{this.#a={x:e.detail.left,y:e.detail.top,width:e.detail.width,height:e.detail.height};const r=this.adapter;t.Utils.isNull(r)||this._invalidateSize()},this._zoomHandler=e=>{const r=this._options;if(r.zoomControl&&t.CustomEventUtils.matchModifiers(e,r.zoomModifiers)){t.avoidHandler(e);const r=1+.1*(e.deltaY<0?-1:1),i=t.Utils.offsetRect(e.currentTarget),a={x:e.clientX,y:e.clientY};this._zoom(r,i,a)}},this._panHandler=e=>{const r=this._panningStart,i=this._getPanPoint(e);if(!t.Utils.isNullOrEmpty(r&&r.point)&&!t.Utils.isNull(i)){t.avoidHandler(e);const a=r.factor,n=r.box,s=r.point;this.viewbox={x:n.x-a*(i.x-s.x),y:n.y-a*(i.y-s.y),width:n.width,height:n.height}}},this._panStartHandler=e=>{if(!this._options.panControl)return;const r=this.#a,i=this.viewbox||{x:0,y:0,width:r.width,height:r.height},a=this._getPanPoint(e);if(a){t.avoidHandler(e),this._stage.style.pointerEvents="none";const n=this._getActualAspectRatio(),s=i.width/r.width,o=i.height/r.height,l=n.slice?Math.min(s,o):Math.max(s,o);this._panningStart={point:a,box:i,factor:l}}},this._panEndHandler=t=>{this._stage.style.pointerEvents="",this._panningStart=null}}get stage(){return this._stage}snapshot(e,r,i){const a=this.adapter;return t.Utils.isNull(a)?Promise.resolve(null):a.snapshot(this,e,r,i)}#n;#t;get transformMatrix(){return this.#t}_transformMatrixScale(){const e=this.#a||t.Utils.offsetRect(this._stage);var r=this.#n||e;const i=this.viewbox||r,a=this.aspectRatio||"none",n="none"===a?"stretch":a.slice?"cover":"contain";return t.Rect.findTransform(i,r,n).a}validate(e){return e instanceof r.DrawableElement&&t.Utils.isNull(e.parent)}draw(e,r=!1){const i=this.adapter;if(!this.disabled&&!t.Utils.isNull(i)){let t=new CustomEvent("predraw",{cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||(i.draw(this,e,r),this.dispatchEvent(new CustomEvent("draw")))}}_drawDebounced(e,r=!1){!t.Utils.isNull(e)&&t.Drawing.isGroup(e)?this.draw(e,r):this.draw(e)}requestDraw(t,e=!1){this._drawDebounced(t,e)}_buildUpDatasourceFromDOM(){this.datasource=(this.items||[]).slice()}#a;_getActualAspectRatio(){const t=this.aspectRatio||"none";return{x:"none"===t?"mid":t.x,y:"none"===t?"mid":t.y,slice:"none"!==t&&t.slice}}_zoomFromValue(e){const r=this.#a;if(t.Utils.isNull(r))return;const i=r,a=this.#n||i,n=this.viewbox||a,s=this.aspectRatio||"none",o="none"===s?"stretch":s.slice?"cover":"contain",l=t.Rect.findTransform(n,i,o),c=t.Rect.findTransform(a,i,o),h=l.a/(c.a*e);this._zoom(h)}_zoom(e,r,i){t.Utils.isNull(r)&&(r=t.Utils.offsetRect(this._stage)),t.Utils.isNull(i)&&(i={x:r.x+.5*r.width,y:r.y+.5*r.height});const a=this.#a,n=this.viewbox||a,s=Math.min(n.width,n.height),o=s*e,l=s*e;if(o>0&&l>0){const t=this._getActualAspectRatio(),e=t.x,a=t.y,s=t.slice,c=n.width/n.height,h=s?Math.max(r.width,r.height):Math.min(r.width,r.height);let d,m;switch(e){case"mid":d=(o-n.width)*(i.x-r.x-.5*(r.width-h))/(h*c);break;case"max":d=(o-n.width)*(i.x-r.x-(r.width-h))/(h*c);break;default:d=(o-n.width)*(i.x-r.x)/(h*c)}switch(a){case"mid":m=(l-n.height)*(i.y-r.y-.5*(r.height-h))/(h*c);break;case"max":m=(l-n.height)*(i.y-r.y-(r.height-h))/(h*c);break;default:m=(l-n.height)*(i.y-r.y)/(h*c)}const p=n.x-d,u=n.y-m;this.viewbox={x:p,y:u,width:o,height:l}}}_getPanPoint(e){const r=this._options;return e instanceof MouseEvent&&t.CustomEventUtils.matchModifiers(e,r.panModifiers)?t.CustomEventUtils.getEventCoordinates(e).page:null}_invalidateSize(){this.adapter.invalidateSize(this,this.#a);const r=this.#t;this.#t=this.adapter.getTransformMatrix(this),this.dispatchEvent(new t.PropertyChangeEvent({propertyName:"transformMatrix",currentValue:this.#t,oldValue:r})),this.zoom=this._transformMatrixScale(),this.dispatchEvent(new e.ResizeEvent(this.#a))}viewActivatedCallback(){super.viewActivatedCallback();const e=this.adapter;t.Utils.isNull(e)||(e.initialize(this),this._invalidateSize(),this._drawDebounced());const r=this._resize;r.addEventListener(t.Components.ResizeEventName,this._resizeHandler,!1);const i=this._stage;r.target=i;const a={capture:!1,passive:!0};i.addEventListener("wheel",this._zoomHandler,!1),i.addEventListener("mousedown",this._panStartHandler,!1),i.addEventListener("touchstart",this._panStartHandler,a),window.addEventListener("mousemove",this._panHandler,!1),window.addEventListener("mouseup",this._panEndHandler,!1),window.addEventListener("touchmove",this._panHandler,a),window.addEventListener("touchend",this._panEndHandler,a)}propertyChangedCallback(e,r,i,a){switch(super.propertyChangedCallback(e,r,i,a),e){case"adapter":t.Utils.isNull(r)||r.dispose(this),t.Utils.isNull(i)||(i.initialize(this),this._invalidateSize(),this._drawDebounced());break;case"aspectRatio":t.Utils.isNull(this.adapter)||this._invalidateSize();break;case"viewbox":t.Utils.isNull(this.adapter)||this._invalidateSize(),this.#n??=this.viewbox||null;break;case"items":this._buildUpDatasourceFromDOM();break;case"zoom":i!==this._transformMatrixScale()&&this._zoomFromValue(i);break;case"options":this._options=t.Utils.extend({},n,i||{});break;case"disabled":case"datasource":this._drawDebounced()}}disconnectedCallback(){const e=this._resize,r=this._stage;t.Utils.isNull(e)||e.removeEventListener(t.Components.ResizeEventName,this._resizeHandler,!1),t.Utils.isNull(r)||(r.removeEventListener("wheel",this._zoomHandler,!1),r.removeEventListener("mousedown",this._panStartHandler,!1),r.removeEventListener("touchstart",this._panStartHandler),window.removeEventListener("mousemove",this._panHandler,!1),window.removeEventListener("mouseup",this._panEndHandler,!1),window.removeEventListener("touchmove",this._panHandler),window.removeEventListener("touchend",this._panEndHandler)),t.Utils.isNull(this.adapter)||this.adapter.dispose(this),super.disconnectedCallback()}};__decorate([t.Watch({converter:t.PropertyConverters.Element})],s.prototype,"adapter",void 0),__decorate([t.Watch({reflectBack:!0,converter:t.PropertyConverters.Rect})],s.prototype,"viewbox",void 0),__decorate([t.Watch({emit:!1,reflectBack:!0,converter:a})],s.prototype,"aspectRatio",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Json})],s.prototype,"datasource",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Json})],s.prototype,"options",void 0),__decorate([t.Watch({converter:t.PropertyConverters.Number})],s.prototype,"zoom",void 0),__decorate([t.ViewChild("."+t.PCSS+"-2d")],s.prototype,"_stage",void 0),__decorate([t.ViewChild(t.P+"-resize")],s.prototype,"_resize",void 0),__decorate([t.Debounce(!0)],s.prototype,"_drawDebounced",null),s=__decorate([t.CustomElement({tagName:t.P+"-"+r.TAG_MIDDLE_NAME,shadow:!0,template:`<${t.P}-resize watch-position="true"></${t.P}-resize><div class="${t.PCSS}-2d" part="container"></div><slot></slot>`})],s),r.Pacem2DElement=s}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){let r=class PacemTextElement extends e.UiElement{propertyChangedCallback(e,r,i,a){if(!a)switch(e){case"text":case"color":case"fontFamily":case"fontSize":case"fontWeight":case"fontStyle":case"anchor":t.Utils.isNull(this.stage)||this.stage.draw(this)}}};__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"text",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"color",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"fontFamily",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Number})],r.prototype,"fontSize",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"fontWeight",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"fontStyle",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.Point})],r.prototype,"anchor",void 0),__decorate([t.Watch({emit:!1,converter:t.PropertyConverters.String})],r.prototype,"textAnchor",void 0),r=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-text"})],r),e.PacemTextElement=r}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){e.AdapterUtils=class AdapterUtils{static stageDispatch(e,r,i){e instanceof EventTarget&&e.dispatchEvent(new t.Drawing.StageEvent("stage"+r,e,i,e.transformMatrix))}static isValidViewbox(e){return!t.Utils.isNullOrEmpty(e)&&t.Rect.isRect(e)&&Number.isFinite(e.x)&&Number.isFinite(e.y)&&Number.isFinite(e.width)&&Number.isFinite(e.height)}static itemDispatch(e,r,i){if(!t.Utils.isNull(e)){var a,n,s;i instanceof Event?n=i:a={item:e,offset:i},"string"==typeof r?s=r:(s=r.type,n=r.originalEvent);const l=e.stage.transformMatrix,c=()=>i instanceof Event?new t.Drawing.DrawableEvent(s,e,n,l):new t.Drawing.DragEvent(s,{detail:a,cancelable:s===t.UI.DragDropEventType.Init||s===t.UI.DragDropEventType.Drag},n,l),h=i instanceof Event?new t.Drawing.DrawableEvent("item"+s,e,n,l):new t.Drawing.DragEvent("item"+s,{detail:a,cancelable:s===t.UI.DragDropEventType.Init||s===t.UI.DragDropEventType.Drag},n,l);var o=!1;if(e instanceof EventTarget){const t=c();e.dispatchEvent(t),o=t.defaultPrevented}return e.stage.dispatchEvent(h),o||h.defaultPrevented}return!1}}}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){const r="pacem:2d-canvas-scene",i="pacem:2d-parent-matrix",a=t.CustomElementUtils.setAttachedPropertyValue,n=t.CustomElementUtils.getAttachedPropertyValue;function s(e){return"none"===e||t.Utils.isNullOrEmpty(e)}function o(e,r){return t.Utils.isNull(e)?r:e}let l=class PacemCanvasAdapterElement extends e.Pacem2DAdapterElement{constructor(){super(...arguments),this._pointer={page:{x:0,y:0},screen:{x:0,y:0},client:{x:0,y:0}},this._dragInitHandler=r=>{const a=this._hitTarget;if(t.Utils.isNull(a)||!t.Drawing.isUiObject(a)||!a.draggable)return void r.preventDefault();const s=r.detail,o=a,l=a.transformMatrix??t.Matrix2D.identity,c=n(a,i,t.Matrix2D.identity);s.data={item:o,initialTransformMatrix:l,parentMatrix:c};e.AdapterUtils.itemDispatch(o,r,{x:0,y:0})&&r.preventDefault()},this._draggingHandler=r=>{t.avoidHandler(r),this._dragging=!0;const i=r.detail,a=i.data,n=i.currentPosition.x-i.origin.x,s=i.currentPosition.y-i.origin.y,o={x:n*a.parentMatrix.a+a.initialTransformMatrix.e,y:s*a.parentMatrix.d+a.initialTransformMatrix.f},l=a.item.stage.transformMatrix;if(!e.AdapterUtils.itemDispatch(a.item,r,{x:n*l.a+l.e,y:s*l.d+l.f}))if(a.item instanceof t.Components.Drawing.UiElement)a.item.translateX=o.x,a.item.translateY=o.y;else{const e=a.initialTransformMatrix,r={a:e.a,b:e.b,c:e.c,d:e.d,e:o.x,f:o.y};t.Utils.extend(a.item,{transformMatrix:r})}},this._dragEndHandler=t=>{this._dragging=!1;const r=t.detail.data,i=r.item.transformMatrix;e.AdapterUtils.itemDispatch(r.item,t,{x:i.e,y:i.f})},this._mousemoveHandler=i=>{this._scopeEvent=i,this._pointer=t.CustomEventUtils.getEventCoordinates(i);const a=i.srcElement,s=n(a,r);this._requestDraw(s),this._dragging||t.Utils.isNull(this._hitTarget)||e.AdapterUtils.stageDispatch(s,"move",i)},this._mouseDownUpHandler=i=>{this._scopeEvent=i,this._pointer=t.CustomEventUtils.getEventCoordinates(i);const a=i.target;if(a instanceof HTMLCanvasElement){const s=n(a,r),o=this._hitTarget,l=i.type.replace(/^(mouse|touch)/,""),c="end"===l?"click":l;t.Utils.isNull(o)||o.stage!==s?e.AdapterUtils.stageDispatch(s,c,i):e.AdapterUtils.itemDispatch(this._hitTarget,c,i)}},this._scenes=new WeakMap,this._handles=new WeakMap}snapshot(t,e,r,i){const a=this._scenes;if(a.has(t)){const n=a.get(t).context.canvas;return this.snapshotElement(n,e,r,i)}return Promise.resolve(null)}getCanvas(t){const e=this._scenes;if(e.has(t)){return e.get(t).context.canvas}return null}_getScreenInverseMatrix(e,r){return t.Matrix2D.invert({a:e.a,b:e.b,c:e.c,d:e.d,e:e.e+r.x,f:e.f+r.y})}getTransformMatrix(e){const r=this._scenes;return r.has(e)?r.get(e).screenInverseMatrix:t.Matrix2D.identity}viewActivatedCallback(){super.viewActivatedCallback();const e=this._dragger=document.createElement(t.P+"-drag-drop");e.mode=t.UI.DragDataMode.Copy,e.dropBehavior=t.UI.DropBehavior.None,e.spillBehavior=t.UI.DropTargetMissedBehavior.None;const r=document.createElement("div");r.hidden=!0,e.floater=r;t.CustomElementUtils.findAncestorShell(this).appendChild(e),e.addEventListener(t.UI.DragDropEventType.Init,this._dragInitHandler,!1),e.addEventListener(t.UI.DragDropEventType.Drag,this._draggingHandler,!1),e.addEventListener(t.UI.DragDropEventType.End,this._dragEndHandler,!1)}disconnectedCallback(){const e=this._dragger;t.Utils.isNull(e)||(e.removeEventListener(t.UI.DragDropEventType.Init,this._dragInitHandler,!1),e.removeEventListener(t.UI.DragDropEventType.Drag,this._draggingHandler,!1),e.removeEventListener(t.UI.DragDropEventType.End,this._dragEndHandler,!1),e.remove()),super.disconnectedCallback()}invalidateSize(r,i){const a=this._scenes;if(!t.Utils.isNull(r)&&!t.Utils.isNullOrEmpty(i)&&a.has(r)){const n=a.get(r),s=n.context;s.canvas.width=i.width,s.canvas.height=i.height;const o=n.offset=t.Utils.offsetRect(s.canvas),l={x:0,y:0,width:i.width,height:i.height},c=r.aspectRatio,h=r.viewbox;if(e.AdapterUtils.isValidViewbox(h)){let e="contain",r="center",i="middle";if("object"==typeof c){switch(e=c.slice?"cover":"contain",c.x){case"min":r="left";break;case"max":r="right"}switch(c.y){case"min":i="top";break;case"max":i="bottom"}}const a=t.Rect.findTransform({x:0,y:0,width:h.width,height:h.height},l,e,r,i),s=t.Matrix2D.translate(a,{x:-a.a*h.x,y:-a.a*h.y});n.transformMatrix=s,n.screenInverseMatrix=this._getScreenInverseMatrix(s,o)}else n.transformMatrix=t.Matrix2D.identity}this._requestDraw(r)}getHitTarget(e){const r=this._hitTarget;return t.Utils.isNull(r)||r.stage!==e?null:r}initialize(e){if(t.Utils.isNull(e))throw"Provided scene is null or undefined.";const i=this._scenes,n=this._dragger;if(i.has(e)){const r=i.get(e).context.canvas;return t.Utils.isNull(n)||n.register(r),r}const s=e.stage;s.innerHTML="";const o=document.createElement("canvas");o.setAttribute("part","stage"),a(o,r,e);const l=o.getContext("2d");return o.addEventListener("mousemove",this._mousemoveHandler,!1),o.addEventListener("touchstart",this._mouseDownUpHandler,{passive:!0}),o.addEventListener("touchmove",this._mouseDownUpHandler,{passive:!0}),o.addEventListener("touchend",this._mouseDownUpHandler,{passive:!0}),o.addEventListener("click",this._mouseDownUpHandler,!1),o.addEventListener("mousedown",this._mouseDownUpHandler,!1),o.addEventListener("mouseup",this._mouseDownUpHandler,!1),s.appendChild(o),i.set(e,{context:l,transformMatrix:t.Matrix2D.identity,offset:t.Utils.offsetRect(o),screenInverseMatrix:t.Matrix2D.identity}),t.Utils.isNull(n)||n.register(o),o}dispose(e){const r=this._scenes;if(r.has(e)){var i=r.get(e).context.canvas;const a=this._dragger;t.Utils.isNull(a)||a.unregister(i),i.removeEventListener("click",this._mouseDownUpHandler,!1),i.removeEventListener("touchend",this._mouseDownUpHandler,!1),i.removeEventListener("mousedown",this._mouseDownUpHandler,!1),i.removeEventListener("mouseup",this._mouseDownUpHandler,!1),i.removeEventListener("touchstart",this._mouseDownUpHandler),i.removeEventListener("mousemove",this._mousemoveHandler,!1),i.remove(),r.delete(e)}}_requestDraw(t){const e=this._handles;e.has(t)&&cancelAnimationFrame(e.get(t));e.set(t,(()=>(this.draw(t),requestAnimationFrame(()=>{})))())}#s;draw(e){const r=this._scenes,i=this._handles;if(!t.Utils.isNull(e)){if(e.adapter!==this)return void(r.has(e)&&(r.delete(e),i.get(e)));if(!r.has(e))return void this.initialize(e);i.has(e)&&cancelAnimationFrame(i.get(e));const a=this._hitTarget,n=e.datasource||[];this._hitTarget=null;const s=r.get(e),o=s.context,l=o.canvas;this.#s=getComputedStyle(l),o.resetTransform(),o.clearRect(0,0,l.width,l.height);const c=s.transformMatrix;o.setTransform(c);const h=this._pointer,d=s.offset,m={x:h.page.x-d.x,y:h.page.y-d.y};for(let t of n)this._draw(e,o,t,{transformMatrix:c},m);const p=this._hitTarget;p!=a&&(t.Utils.isNull(a)||(a instanceof Element&&a.dispatchEvent(new t.Drawing.DrawableEvent("out",a,this._scopeEvent,c)),e.dispatchEvent(new t.Drawing.DrawableEvent("itemout",a,this._scopeEvent,c))),t.Utils.isNull(p)||(p instanceof Element&&p.dispatchEvent(new t.Drawing.DrawableEvent("over",p,this._scopeEvent,c)),e.dispatchEvent(new t.Drawing.DrawableEvent("itemover",p,this._scopeEvent,c))))}}_draw(e,r,n,s,o){if(n.stage??=e,t.Drawing.isDrawable(n)&&n.hide)return;let l;t.Drawing.isUiObject(n)&&n.draggable&&!n.hide&&!n.inert&&a(n,i,r.getTransform().inverse()),t.Drawing.isUiObject(n)&&(l=n.transformMatrix,t.Utils.isNull(l)||t.Matrix2D.isIdentity(l)||r.transform(l.a,l.b,l.c,l.d,l.e,l.f));let c=s;if(t.Drawing.isPresentationObject(n)&&(c=t.Drawing.PresentationState.combine(n,s,r.getTransform()),this._setPresentationState(r,c)),t.Drawing.isShape(n)||n instanceof t.Components.Drawing.ShapeElement)this._drawShape(r,n,o);else if(t.Drawing.isText(n)||n instanceof t.Components.Drawing.PacemTextElement)this._drawText(r,n,o);else if(t.Drawing.isImage(n)||n instanceof t.Components.Drawing.PacemImageElement)this._drawImage(r,n,o);else if(t.Drawing.isGroup(n)||n instanceof t.Components.Drawing.PacemGroupElement)for(let t of n.childDrawables||[])this._draw(e,r,t,c,o);t.Drawing.isUiObject(n)&&n.draggable&&!n.hide&&!n.inert&&a(n,"pacem:2d-world-matrix",r.getTransform().inverse()),this._setPresentationState(r,s)}_setPresentationState(e,r){if(e.setTransform(r.transformMatrix),t.Utils.isNullOrEmpty(r.stroke)||s(r.stroke)?e.strokeStyle="transparent":e.strokeStyle=r.stroke,t.Utils.isNullOrEmpty(r.lineWidth)?e.lineWidth=0:e.lineWidth=r.lineWidth,t.Utils.isNullOrEmpty(r.dashArray)?e.setLineDash([]):e.setLineDash(r.dashArray),t.Utils.isNullOrEmpty(r.lineCap)?e.lineCap="butt":e.lineCap=r.lineCap,t.Utils.isNullOrEmpty(r.lineJoin)?e.lineJoin="miter":e.lineJoin=r.lineJoin,"object"!=typeof r.fill||t.Utils.isNullOrEmpty(r.fill))t.Utils.isNullOrEmpty(r.fill)||"string"!=typeof r.fill||s(r.fill)?e.fillStyle="transparent":e.fillStyle=r.fill;else{const{stops:i}=r.fill;let a;if(t.Drawing.isLinearGradient(r.fill)){const{start:t,end:i}=r.fill;a=e.createLinearGradient(t.x,t.y,i.x,i.y)}else{if(!t.Drawing.isRadialGradient(r.fill))throw new Error("Unmanaged gradient type.");{const{center:t,radius:i}=r.fill;a=e.createRadialGradient(t.x,t.y,i,t.x,t.y,i)}}for(let t of i)a.addColorStop(t.offset,t.color);e.fillStyle=a}t.Utils.isNullOrEmpty(r.opacity)?e.globalAlpha=1:e.globalAlpha=r.opacity}_drawImage(e,r,i){const s="pacem:2d-canvas-imagesrc";let l=n(r,s);const c=()=>{let a=l.naturalWidth,n=l.naturalHeight,s=r.width,c=r.height;if(s>0&&c>0||(s>0?c=n*s/a:c>0?s=a*c/n:(s=a,c=n)),!this._dragging&&!r.inert&&!t.Utils.isNull(i)){const t=new Path2D(`M ${r.x} ${r.y} h ${s} v ${c} H ${r.x} Z`);e.isPointInPath(t,i.x,i.y)&&(this._hitTarget=r)}e.globalAlpha=o(r.opacity,1),e.drawImage(l,r.x,r.y,s,c)};t.Utils.isNull(l)?(l=new Image,l.src=r.src,l.onload=()=>{a(r,s,l),c()}):c()}_drawText(e,r,i){const a=this.DefaultShapeValues,n=e.fillStyle=o(r.color,a.stroke),l=(e.getTransform(),r.fontSize>0?`${r.fontSize}px`:this.#s.fontSize),c=r.fontStyle||this.#s.fontStyle,h=r.fontWeight||this.#s.fontWeight;e.font=`${c} ${h} ${l} ${r.fontFamily??this.#s.fontFamily}`,e.textAlign="middle"===r.textAnchor?"center":r.textAnchor,e.fillText(r.text,r.anchor.x,r.anchor.y),e.globalAlpha=o(r.opacity,1);const d=!s(n);if(!this._dragging&&!r.inert&&!t.Utils.isNull(i)){const t=e.measureText(r.text),a=t.width,n=t.actualBoundingBoxAscent+t.actualBoundingBoxDescent,s=r.anchor.x-t.actualBoundingBoxLeft,o=r.anchor.y-t.actualBoundingBoxAscent,l=new Path2D(`M ${s} ${o} h ${a} v ${n} H ${s} z`);d&&e.isPointInPath(l,i.x,i.y)&&(this._hitTarget=r)}}_drawShape(e,r,i){if(t.Utils.isNullOrEmpty(r?.pathData))return;e.beginPath();const a="string"!=typeof e.fillStyle||!s(e.fillStyle),n="string"!=typeof e.strokeStyle||!s(e.strokeStyle);var o=new Path2D(r.pathData);this._dragging||r.inert||t.Utils.isNull(i)||(a&&e.isPointInPath(o,i.x,i.y)||n&&e.isPointInStroke(o,i.x,i.y))&&(this._hitTarget=r),n&&e.stroke(o),a&&e.fill(o);const l=!t.Utils.isNullOrEmpty(r.vertices)&&r.vertices.length>1,c=!t.Utils.isNull(r.markerEnd),h=!t.Utils.isNull(r.markerStart),d=!t.Utils.isNull(r.markerMid);if((c||d||h)&&(l||this.log(t.Logging.LogLevel.Warn,"Not enough vertices were explicited in order to make markers renderable.")),l){const t=e.getTransform();if(h){const t=r.markerEnd,i=r.vertices[1],a=r.vertices[0],n=Math.atan2(a.y-i.y,a.x-i.x);this._drawMarker(e,t,a,n)}if(d){const i=r.markerEnd;for(let a=1;a<r.vertices.length-1;a++){e.setTransform(t);const n=r.vertices[a],s=r.vertices[a+1],o=Math.atan2(s.y-n.y,s.x-n.x);this._drawMarker(e,i,s,o)}}if(c){e.setTransform(t);const i=r.markerEnd,a=r.vertices[r.vertices.length-2],n=r.vertices[r.vertices.length-1],s=Math.atan2(n.y-a.y,n.x-a.x);this._drawMarker(e,i,n,s)}}}_drawMarker(e,r,i,a){const n=this.DefaultShapeValues,l=r.ref?.x||0,c=r.ref?.y||0,h=(r.width||1)*e.lineWidth,d=(r.width||1)*e.lineWidth;let m=r.viewbox,p={x:0,y:0,width:h,height:d};t.Utils.isNull(m)&&(m=p);const u={a:p.width/m.width,d:p.height/m.height};e.translate(i.x,i.y),e.rotate(a),e.scale(u.a,u.d),e.translate(-l,-c),e.fillStyle=o(r.fill,n.fill),e.strokeStyle=o(r.stroke,n.stroke);const g=!s(r.fill),v=!s(r.stroke);var y=new Path2D(r.pathData);g&&e.fill(y),v&&e.stroke(y)}};l=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-canvas-adapter"})],l),e.PacemCanvasAdapterElement=l}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={})),function(t){!function(e){!function(e){const r="http://www.w3.org/2000/svg",i="pacem:2-svg-drawable",a="pacem:2d-svg-stage",n=t.CustomElementUtils.getAttachedPropertyValue,s=t.CustomElementUtils.setAttachedPropertyValue,o=t.CustomElementUtils.deleteAttachedPropertyValue;function l(e,r){return t.Utils.isNull(e)?r:e}function c(t,e,r){return r>=t.children.length?(t.appendChild(e),null):t.replaceChild(e,t.children.item(r))}let h=class PacemSvgAdapterElement extends e.Pacem2DAdapterElement{constructor(){super(...arguments),this._hitTarget=null,this._dragInitHandler=r=>{const a=r.detail,s=a.element,o=n(s,i),l=o.stage.transformMatrix,c=o.transformMatrix??t.Matrix2D.identity;a.data={stageTransformMatrix:l,item:o,initialTransformMatrix:c};e.AdapterUtils.itemDispatch(o,r,{x:0,y:0})&&r.preventDefault()},this._draggingHandler=r=>{t.avoidHandler(r),this._dragging=!0;const i=r.detail.element,a=r.detail.data,n=r.detail,s=(n.currentPosition.x-n.origin.x)*a.stageTransformMatrix.a,o=(n.currentPosition.y-n.origin.y)*a.stageTransformMatrix.d,l=s+a.initialTransformMatrix.e,c=o+a.initialTransformMatrix.f,h={x:s+a.stageTransformMatrix.e,y:o+a.stageTransformMatrix.f};if(!e.AdapterUtils.itemDispatch(a.item,r,h)){const t=a.initialTransformMatrix;i.style.transform=`matrix(${t.a},${t.b},${t.c},${t.d},${l},${c})`}},this._dragEndHandler=r=>{this._dragging=!1;const i=r.detail,a=i.element,n=i.data,s=t.Utils.deserializeTransform(a.style),o={x:s.e,y:s.f};if(n.item instanceof t.Components.Drawing.UiElement)n.item.translateX=o.x,n.item.translateY=o.y;else{const e=n.initialTransformMatrix,r={a:e.a,b:e.b,c:e.c,d:e.d,e:o.x,f:o.y};t.Utils.extend(n.item,{transformMatrix:r})}a.style.transform="",e.AdapterUtils.itemDispatch(n.item,r,o)},this._mousemoveHandler=r=>{var s=t.CustomEventUtils.getEventCoordinates(r).client;if(!this._dragging){var o=null;r.target.getRootNode().elementsFromPoint(s.x,s.y).find(t=>(o=n(t,i))&&!o.inert);var l=this._hitTarget,c=o;(t.Utils.isNull(o&&o.stage)||!this._scenes.has(o.stage)||o.inert)&&(c=null);const h=this._hitTarget=c;if(c!==l&&(t.Utils.isNull(l)||(this._dragger.unregister(this._items.get(l)),e.AdapterUtils.itemDispatch(l,"out",r)),t.Utils.isNull(c)||(c.draggable&&this._dragger.register(this._items.get(c)),e.AdapterUtils.itemDispatch(c,"over",r))),t.Utils.isNull(h)){const i=r.currentTarget,s=n(i,a);t.Utils.isNull(s)||e.AdapterUtils.stageDispatch(s,"move",r)}}},this._mouseDownUpHandler=r=>{const i=r.currentTarget;if(i instanceof SVGSVGElement){const s=n(i,a),o=this._hitTarget,l=r.type.replace(/^mouse/,"");t.Utils.isNull(o)||o.stage!==s?e.AdapterUtils.stageDispatch(s,l,r):e.AdapterUtils.itemDispatch(this._hitTarget,l,r)}},this._scenes=new WeakMap,this._markers=new WeakMap,this._gradients=new WeakMap,this._items=new WeakMap}snapshot(t,e,r,i){if(this._scenes.has(t)){const a=this._scenes.get(t);return this.snapshotElement(a,e,r,i)}return Promise.resolve(null)}getTransformMatrix(e){const r=this._scenes;return r.has(e)?r.get(e).getScreenCTM().inverse():t.Matrix2D.identity}viewActivatedCallback(){super.viewActivatedCallback();const e=this._dragger=document.createElement(t.P+"-drag-drop");e.mode=t.UI.DragDataMode.Self;t.CustomElementUtils.findAncestorShell(this).appendChild(e),e.addEventListener(t.UI.DragDropEventType.Init,this._dragInitHandler,!1),e.addEventListener(t.UI.DragDropEventType.Drag,this._draggingHandler,!1),e.addEventListener(t.UI.DragDropEventType.End,this._dragEndHandler,!1)}disconnectedCallback(){const e=this._dragger;t.Utils.isNull(e)||(e.removeEventListener(t.UI.DragDropEventType.Init,this._dragInitHandler,!1),e.removeEventListener(t.UI.DragDropEventType.Drag,this._draggingHandler,!1),e.removeEventListener(t.UI.DragDropEventType.End,this._dragEndHandler,!1),e.remove()),super.disconnectedCallback()}invalidateSize(r,i){const a=this._scenes;if(!t.Utils.isNull(r)&&!t.Utils.isNullOrEmpty(i)&&a.has(r)){var n=a.get(r);n.setAttribute("width",i.width+""),n.setAttribute("height",i.height+"");const s=r.viewbox,o=r.aspectRatio;e.AdapterUtils.isValidViewbox(s)?n.setAttribute("viewBox",`${s.x} ${s.y} ${s.width} ${s.height}`):n.removeAttribute("viewBox"),t.Utils.isNullOrEmpty(o)||"string"==typeof o?n.removeAttribute("preserveAspectRatio"):n.setAttribute("preserveAspectRatio",`xM${o.x.substring(1)}YM${o.y.substring(1)} ${o.slice?"slice":"meet"}`)}}initialize(e){if(t.Utils.isNull(e))throw"Provided scene is null or undefined.";const i=this._scenes;if(i.has(e))return i.get(e);const n=e.stage;n.innerHTML="",this._items=new WeakMap;var o=document.createElementNS(r,"svg");o.setAttribute("part","stage"),s(o,a,e),n.appendChild(o),i.set(e,o);return o.addEventListener("mousemove",this._mousemoveHandler,!1),o.addEventListener("click",this._mouseDownUpHandler,!1),o.addEventListener("mousedown",this._mouseDownUpHandler,!1),o.addEventListener("mouseup",this._mouseDownUpHandler,!1),o}dispose(t){const e=this._scenes;if(e.has(t)){var r=e.get(t);r.removeEventListener("mousemove",this._mousemoveHandler),r.removeEventListener("click",this._mouseDownUpHandler),r.removeEventListener("mousedown",this._mouseDownUpHandler),r.removeEventListener("mouseup",this._mouseDownUpHandler),o(r,a),r.remove(),e.delete(t)}}getHitTarget(t){return this._hitTarget}draw(e,r,i=!1){const a=this._scenes,n=this._items;if(!t.Utils.isNull(e))if(e.adapter===this){a.has(e)||this.initialize(e);var s=e.datasource,o=!0,l=a.get(e);!t.Utils.isNull(r)&&n.has(r)&&(s=[r],l=n.get(r).parentNode,o=!1),o&&(l.innerHTML="<defs></defs>",this._markers=new WeakMap),this._draw(e,l,s||[],o,i)}else a.has(e)&&a.delete(e)}_hasItems(e){return t.Drawing.isGroup(e)}_disposeSvg(e){if(!t.Utils.isNull(e)){var r=n(e,i);o(e,i),this._items.delete(r)}}_draw(e,r,a,n,o){const h=this._items;let d=0;if(r.firstElementChild instanceof SVGDefsElement&&d++,!t.Utils.isNullOrEmpty(a))for(let m of a){let a;if(m.stage??=e,h.has(m)?(a=h.get(m),a.parentNode!==r&&this._disposeSvg(c(r,a,d))):(a=this._buildSVGElement(m),s(a,i,m),this._disposeSvg(c(r,a,d)),h.set(m,a)),t.Drawing.isDrawable(m)&&(m.hide?a.setAttribute("display","none"):a.removeAttribute("display"),a.style.transform=""),t.Drawing.isShape(m)){const t=a;t.setAttribute("d",l(m.pathData,"M0,0"));for(let{marker:e,suffix:i}of[{marker:m.markerStart,suffix:"start"},{marker:m.markerEnd,suffix:"end"},{marker:m.markerMid,suffix:"mid"}])if(e){const a=this._ensureMarker(r,e);t.setAttribute("marker-"+i,`url(#${a.id})`)}else t.removeAttribute("marker-"+i)}else if(t.Drawing.isText(m)){const e=a;e.textContent=m.text,e.style.fill=t.Utils.isNullOrEmpty(m.color)?"":m.color,e.style.fontFamily=t.Utils.isNullOrEmpty(m.fontFamily)?"":m.fontFamily,e.style.fontSize=t.Utils.isNull(m.fontSize)?"":m.fontSize+"px",t.Utils.isNullOrEmpty(m.fontWeight)||(e.style.fontWeight=m.fontWeight),t.Utils.isNullOrEmpty(m.fontStyle)||(e.style.fontStyle=m.fontStyle),e.setAttribute("text-anchor",l(m.textAnchor,"start")),t.Utils.isNull(m.anchor)?(e.removeAttribute("x"),e.removeAttribute("y")):(e.setAttribute("x",m.anchor.x.toString()),e.setAttribute("y",m.anchor.y.toString()))}else if(t.Drawing.isImage(m)){const e=a;e.setAttribute("href",m.src),e.setAttribute("preserveAspectRatio","none"),m.width>0?e.setAttribute("width",""+m.width):e.removeAttribute("width"),m.height>0?e.setAttribute("height",""+m.height):e.removeAttribute("height"),t.Utils.isNull(m.x)?e.removeAttribute("x"):e.setAttribute("x",""+m.x),t.Utils.isNull(m.y)?e.removeAttribute("y"):e.setAttribute("y",""+m.y)}if(t.Drawing.isUiObject(m)){const e=m.transformMatrix;t.Utils.isNull(e)||t.Matrix2D.isIdentity(e)?a.removeAttribute("transform"):a.setAttribute("transform",`matrix(${e.a} ${e.b} ${e.c} ${e.d} ${e.e} ${e.f})`);const r=l(m.opacity,1);1===r?a.removeAttribute("opacity"):a.setAttribute("opacity",""+r)}if(t.Drawing.isPresentationObject(m)){if(t.Utils.isNullOrEmpty(m.fill))a.removeAttribute("fill");else if("string"==typeof m.fill)a.setAttribute("fill",m.fill);else{const t=this._ensureGradient(r,m.fill);a.setAttribute("fill",`url(#${t.id})`)}t.Utils.isNullOrEmpty(m.stroke)?a.removeAttribute("stroke"):a.setAttribute("stroke",m.stroke),t.Utils.isNullOrEmpty(m.dashArray)?a.removeAttribute("stroke-dasharray"):a.setAttribute("stroke-dasharray",m.dashArray.join(" ")),t.Utils.isNullOrEmpty(m.lineCap)?a.removeAttribute("stroke-linecap"):a.setAttribute("stroke-linecap",m.lineCap),t.Utils.isNullOrEmpty(m.lineJoin)?a.removeAttribute("stroke-linejoin"):a.setAttribute("stroke-linejoin",m.lineJoin),t.Utils.isNullOrEmpty(m.lineWidth)?a.removeAttribute("stroke-width"):a.setAttribute("stroke-width",""+m.lineWidth)}m.inert?a.style.pointerEvents="none":a.style.pointerEvents="",(n||o)&&this._hasItems(m)&&this._draw(e,a,m.childDrawables,!0,o),d++}if(n)for(let t=r.children.length-1;t>=d;t--){const e=r.children.item(t);this._disposeSvg(e),e.remove()}}_buildSVGElement(e){return t.Drawing.isShape(e)||e instanceof t.Components.Drawing.ShapeElement?document.createElementNS(r,"path"):t.Drawing.isText(e)||e instanceof t.Components.Drawing.PacemTextElement?document.createElementNS(r,"text"):t.Drawing.isImage(e)||e instanceof t.Components.Drawing.PacemImageElement?document.createElementNS(r,"image"):document.createElementNS(r,"g")}_ensureGradient(e,i){const a=this._gradients;a.has(e)||a.set(e,new WeakMap);const n=a.get(e),s=t.Drawing.isLinearGradient(i),o=t.Drawing.isRadialGradient(i);if(n.has(i)){const t=n.get(i);(s&&t instanceof SVGLinearGradientElement||o&&t instanceof SVGRadialGradientElement)&&(t.remove(),n.delete(i))}if(!n.has(i)){let a,o=e;for(;t.Utils.isNull(a=o.querySelector(":scope > defs"));){const t=o.parentElement;if(!(t instanceof SVGElement))break;o=t}if(t.Utils.isNull(a))throw new Error("Must provide a <defs> element.");var l=null;if(s)l=document.createElementNS(r,"linearGradient");else{if(!t.Drawing.isRadialGradient(i))throw new Error("Unmanaged gradient type.");l=document.createElementNS(r,"radialGradient")}l.setAttribute("gradientUnits","userSpaceOnUse"),l.setAttribute("id",`grad-${t.Utils.uniqueCode()}`),a.appendChild(l),n.set(i,l)}const c=n.get(i);s?(c.setAttribute("x1",i.start.x.toString()),c.setAttribute("y1",i.start.y.toString()),c.setAttribute("x2",i.end.x.toString()),c.setAttribute("y2",i.end.y.toString())):o&&(c.setAttribute("cx",i.center.x.toString()),c.setAttribute("cy",i.center.y.toString()),c.setAttribute("r",i.radius.toString()));let h=0;for(let e of i.stops){for(;c.children.length<=h;){const t=document.createElementNS(r,"stop");c.appendChild(t)}const i=c.children.item(h);i.setAttribute("offset",100*e.offset+"%"),i.setAttribute("stop-color",e.color),t.Utils.isNull(e.opacity)||i.setAttribute("stop-opacity",e.opacity.toString()),h++}for(;c.children.length>i.stops.length;){const t=c.children.item(c.children.length-1);c.removeChild(t)}return c}_ensureMarker(e,i){const a=this._markers;a.has(e)||a.set(e,new WeakMap);const n=a.get(e);if(!n.has(i)){const a=document.createElementNS(r,"marker");n.set(i,a);const s=document.createElementNS(r,"path");a.appendChild(s),a.setAttribute("id","mark"+t.Utils.uniqueCode());let o,l=e;for(;t.Utils.isNull(o=l.querySelector(":scope > defs"));){const t=l.parentElement;if(!(t instanceof SVGElement))break;l=t}if(t.Utils.isNull(o))throw new Error("Must provide a <defs> element.");o.appendChild(a)}const s=n.get(i),o=s.firstElementChild;return s.setAttribute("orient","auto-start-reverse"),t.Utils.isNullOrEmpty(i.viewbox)?s.removeAttribute("viewBox"):s.setAttribute("viewBox",`${i.viewbox.x} ${i.viewbox.y} ${i.viewbox.width} ${i.viewbox.height}`),t.Utils.isNullOrEmpty(i.ref)?(s.removeAttribute("refX"),s.removeAttribute("refY")):(s.setAttribute("refX",i.ref.x.toString()),s.setAttribute("refY",i.ref.y.toString())),i.height>0?s.setAttribute("markerHeight",i.height.toString()):s.removeAttribute("markerHeight"),i.width>0?s.setAttribute("markerWidth",i.width.toString()):s.removeAttribute("markerWidth"),o.setAttribute("d",i.pathData),t.Utils.isNullOrEmpty(i.fill)?o.removeAttribute("fill"):o.setAttribute("fill",i.fill),t.Utils.isNullOrEmpty(i.stroke)?o.removeAttribute("stroke"):o.setAttribute("stroke",i.stroke),s}};h=__decorate([t.CustomElement({tagName:t.P+"-"+e.TAG_MIDDLE_NAME+"-svg-adapter"})],h),e.PacemSvgAdapterElement=h}(e.Drawing||(e.Drawing={}))}(t.Components||(t.Components={}))}(Pacem||(Pacem={}));

package/dist/js/pacem-3d.d.ts

@@ -1,5 +1,5 @@
 /**
- * pacem v0.53.0-stevin (https://js.pacem.it)
+ * pacem v0.53.0 (https://js.pacem.it)
  * Copyright 2026 Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -755,6 +755,34 @@ declare namespace Pacem.Drawing3D.WebGPU {
     const WGSL_VERTEXINPUT_STRUCT_NAME = "VertexInput";
     const WGSL_VERTEXOUTPUT_STRUCT_NAME = "VertexOutput";
     const WGSL_INTERACTIONDATA_STRUCT_NAME = "InteractionData";
+    enum GPUBufferUsage {
+        COPY_SRC = 4,
+        COPY_DST = 8,
+        INDEX = 16,
+        INDIRECT = 256,
+        MAP_READ = 1,
+        MAP_WRITE = 2,
+        QUERY_RESOLVE = 512,
+        STORAGE = 128,
+        UNIFORM = 64,
+        VERTEX = 32
+    }
+    enum GPUTextureUsage {
+        COPY_SRC = 1,
+        COPY_DST = 2,
+        RENDER_ATTACHMENT = 16,
+        STORAGE_BINDING = 8,
+        TEXTURE_BINDING = 4
+    }
+    enum GPUShaderStage {
+        VERTEX = 1,
+        FRAGMENT = 2,
+        COMPUTE = 4
+    }
+    enum GPUMapMode {
+        READ = 1,
+        WRITE = 2
+    }
 }
 declare namespace Pacem.Drawing3D.WebGPU {
     type BasicMaterialFragmentOptions = {