@node-projects/web-component-designer 0.1.308 → 0.1.309
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/elements/controls/DesignerTabControl.js +1 -1
- package/dist/elements/controls/DesignerTabControl.js.map +1 -1
- package/dist/elements/widgets/designerView/extensions/BasicStackedToolbarExtension.js +2 -2
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js +7 -7
- package/dist/elements/widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js +1 -1
- package/dist/elements/widgets/designerView/extensions/ResizeExtensionProvider.js +1 -1
- package/dist/elements/widgets/designerView/extensions/RotateExtensionProvider.js +2 -2
- package/dist/elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js +1 -1
- package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.js +2 -2
- package/dist/elements/widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js +1 -1
- package/dist/elements/widgets/designerView/extensions/grid/GridChildToolbarExtension.js +2 -2
- package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension.js +1 -1
- package/dist/elements/widgets/designerView/overlayLayerView.js +3 -3
- package/dist/index-min.js +24 -24
- package/package.json +1 -1
|
@@ -122,7 +122,7 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
|
|
|
122
122
|
outerDiv.appendChild(this._moreContainer);
|
|
123
123
|
this._moreDiv.onclick = () => {
|
|
124
124
|
if (this._moreContainer.children.length && this._moreContainer.style.visibility == "hidden")
|
|
125
|
-
this._moreContainer.style.visibility = '
|
|
125
|
+
this._moreContainer.style.visibility = '';
|
|
126
126
|
else
|
|
127
127
|
this._moreContainer.style.visibility = "hidden";
|
|
128
128
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DesignerTabControl.js","sourceRoot":"","sources":["../../../src/elements/controls/DesignerTabControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAKvH,MAAM,OAAO,kBAAmB,SAAQ,gCAAgC;IAE9D,cAAc,GAAW,CAAC,CAAC,CAAC;IAEpC,6CAA6C;IACrC,OAAO,CAAiB;IACxB,UAAU,CAAiB;IAC3B,QAAQ,CAAiB;IACzB,cAAc,CAAiB;IAC/B,WAAW,GAAG,IAAI,OAAO,EAA+B,CAAC;IACzD,aAAa,GAAG,IAAI,CAAC;IAE7B,MAAM,CAAmB,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAsF7B,CAAC;IAER;QACE,KAAK,EAAE,CAAC;QAGR;;;;;;;;aAQK;QAEL,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC5C,QAAQ,CAAC,SAAS,GAAG,OAAO,CAAC;QAC7B,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC/C,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,QAAQ,CAAC;QACrC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEtC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,oBAAoB,CAAA;QAC9C,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAA;QAC9B,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACpD,IAAI,CAAC,cAAc,CAAC,SAAS,GAAG,gBAAgB,CAAC;QACjD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAChD,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1C,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAG,GAAG,EAAE;YAC3B,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,IAAI,QAAQ;gBACzF,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"DesignerTabControl.js","sourceRoot":"","sources":["../../../src/elements/controls/DesignerTabControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAKvH,MAAM,OAAO,kBAAmB,SAAQ,gCAAgC;IAE9D,cAAc,GAAW,CAAC,CAAC,CAAC;IAEpC,6CAA6C;IACrC,OAAO,CAAiB;IACxB,UAAU,CAAiB;IAC3B,QAAQ,CAAiB;IACzB,cAAc,CAAiB;IAC/B,WAAW,GAAG,IAAI,OAAO,EAA+B,CAAC;IACzD,aAAa,GAAG,IAAI,CAAC;IAE7B,MAAM,CAAmB,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAsF7B,CAAC;IAER;QACE,KAAK,EAAE,CAAC;QAGR;;;;;;;;aAQK;QAEL,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC5C,QAAQ,CAAC,SAAS,GAAG,OAAO,CAAC;QAC7B,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC/C,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,QAAQ,CAAC;QACrC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEtC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,oBAAoB,CAAA;QAC9C,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAA;QAC9B,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACpD,IAAI,CAAC,cAAc,CAAC,SAAS,GAAG,gBAAgB,CAAC;QACjD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAChD,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1C,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAG,GAAG,EAAE;YAC3B,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,IAAI,QAAQ;gBACzF,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAC;;gBAE1C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QACpD,CAAC,CAAA;QAED,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC5C,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,QAAQ,CAAC;QAClC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QAC1C,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAEhC,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAClD,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC,CAAC,CAAC;QACH,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAChD,IAAI,CAAC,GAAG,CAAC,CAAC;QACV,SAAS,CAAC,mBAAmB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACnD,SAAS,CAAC,mBAAmB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC/C,IAAI,UAAU,GAAG,IAAI,CAAC;QACtB,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC/B,IAAkB,IAAK,CAAC,KAAK,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;gBAChD,IAAI,QAAQ,GAAG,IAAmB,CAAC;gBACnC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,UAAU,EAAE,CAAC;oBAClD,IAAI,CAAC,YAAY,EAAE,CAAC;oBACpB,UAAU,GAAG,KAAK,CAAC;gBACrB,CAAC;gBACD,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;gBACpD,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;gBAC9C,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;oBAC/G,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;oBAC1C,CAAC,IAAI,YAAY,CAAC,WAAW,CAAC;gBAChC,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAE3B,4FAA4F;YAE5F,IAAI,sBAAsB,GAAG,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAA;YAChE,IAAI,sBAAsB,EAAE,CAAC;gBAC3B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,sBAAsB,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;IACH,CAAC;IAED,IAAW,aAAa;QACtB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;IACvD,CAAC;IACD,IAAW,aAAa,CAAC,KAAa;QACpC,IAAI,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,cAAc;YACpD,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACpC,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,EAAE,CAAC;QAC/B,IAAI,CAAC,GAAG,CAAC,CAAC;QACV,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC/B,IAAkB,IAAK,CAAC,KAAK,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;gBAChD,IAAI,QAAQ,GAAG,IAAmB,CAAC;gBACnC,IAAI,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBAChD,YAAY,CAAC,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACxC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACpC,YAAY,CAAC,SAAS,GAAG,YAAY,CAAC;gBACtC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACV,YAAY,CAAC,aAAa,GAAG,GAAG,EAAE;oBAChC,IAAI,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC;oBAC9B,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;oBACxB,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM;wBACjC,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;oBACxC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;gBAClD,CAAC,CAAA;gBACD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;gBAC7C,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;gBAC1C,CAAC,EAAE,CAAC;YACN,CAAC;QACH,CAAC;QAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAEO,qBAAqB,CAAC,QAAiB,EAAE,QAAQ,GAAG,KAAK;QAC/D,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC;QACf,KAAK,IAAI,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClC,IAAkB,OAAQ,CAAC,KAAK,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;gBACnD,KAAK,EAAE,CAAC;gBACR,IAAI,KAAK,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;oBACjC,IAAI,OAAO,CAAC,IAAI,IAAI,QAAQ;wBAC1B,OAAO,CAAC,IAAI,GAAG,QAAQ,CAAC;oBAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAc,OAAO,CAAC,CAAC;oBAC5D,IAAI,QAAQ,EAAE,CAAC;wBACb,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;wBACnC,IAA6B,OAAQ,CAAC,SAAS;4BACpB,OAAQ,CAAC,SAAS,EAAE,CAAC;oBAClD,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;oBAChC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAc,OAAO,CAAC,CAAC;oBAC5D,IAAI,QAAQ,EAAE,CAAC;wBACb,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;oBACxC,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QACD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;QACjH,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;IAClD,CAAC;IAEe,oBAAoB,GAAG,IAAI,UAAU,EAA2C,CAAC;;AAGnG,cAAc,CAAC,MAAM,CAAC,oCAAoC,EAAE,kBAAkB,CAAC,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { AbstractExtension } from "./AbstractExtension.js";
|
|
|
3
3
|
export const basicStackedToolbarExtensionOverlayOptionName = 'basicStackedToolbarExtensionShowOverlay';
|
|
4
4
|
export class BasicStackedToolbarExtension extends AbstractExtension {
|
|
5
5
|
static basicTemplate = `
|
|
6
|
-
<select title="position" id="position" style="pointer-events:
|
|
6
|
+
<select title="position" id="position" style="pointer-events: auto; height: 24px; width: 80px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
|
|
7
7
|
<option>static</option>
|
|
8
8
|
<option>relative</option>
|
|
9
9
|
<option>absolute</option>
|
|
@@ -13,7 +13,7 @@ export class BasicStackedToolbarExtension extends AbstractExtension {
|
|
|
13
13
|
<img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
|
|
14
14
|
<img data-value="inline" title="inline" src="${assetsPath}images/display/inline.svg">
|
|
15
15
|
</node-projects-image-button-list-selector>
|
|
16
|
-
<select title="display" id="displayType" style="pointer-events:
|
|
16
|
+
<select title="display" id="displayType" style="pointer-events: auto; height: 24px; width: 80px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
|
|
17
17
|
<option>block</option>
|
|
18
18
|
<option>flex</option>
|
|
19
19
|
<option>grid</option>
|
|
@@ -7,12 +7,12 @@ import { getBoundingClientRectAlsoForDisplayContents } from "../../../../helper/
|
|
|
7
7
|
export class EditTextExtension extends AbstractExtension {
|
|
8
8
|
static template = html `
|
|
9
9
|
<div style="height: 100%; display: flex; gap: 2px; width: 100%;">
|
|
10
|
-
<button data-command="font-weight" data-command-parameter="800" style="pointer-events:
|
|
11
|
-
<button data-command="font-style" data-command-parameter="italic" style="pointer-events:
|
|
12
|
-
<button data-command="text-decoration" data-command-parameter="underline" style="pointer-events:
|
|
13
|
-
<button data-command="text-decoration" data-command-parameter="line-through" style="pointer-events:
|
|
14
|
-
<button data-command="text-decoration" data-command-parameter="overline" style="pointer-events:
|
|
15
|
-
<select data-command="fontSize" style="pointer-events:
|
|
10
|
+
<button data-command="font-weight" data-command-parameter="800" style="pointer-events: auto; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
|
|
11
|
+
<button data-command="font-style" data-command-parameter="italic" style="pointer-events: auto; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
|
|
12
|
+
<button data-command="text-decoration" data-command-parameter="underline" style="pointer-events: auto; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
|
|
13
|
+
<button data-command="text-decoration" data-command-parameter="line-through" style="pointer-events: auto; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
|
|
14
|
+
<button data-command="text-decoration" data-command-parameter="overline" style="pointer-events: auto; height: 24px; width: 24px; padding: 0;"><span style="text-decoration: overline">o</span></button>
|
|
15
|
+
<select data-command="fontSize" style="pointer-events: auto; height: 24px; width: 60px; padding: 0;">
|
|
16
16
|
<option>8px</option>
|
|
17
17
|
<option>9px</option>
|
|
18
18
|
<option>10px</option>
|
|
@@ -27,7 +27,7 @@ export class EditTextExtension extends AbstractExtension {
|
|
|
27
27
|
<option>32px</option>
|
|
28
28
|
<option>36px</option>
|
|
29
29
|
</select>
|
|
30
|
-
<select id="fontFamily" data-command="font-family" style="pointer-events:
|
|
30
|
+
<select id="fontFamily" data-command="font-family" style="pointer-events: auto; height: 24px; width: 90px; padding: 0;">
|
|
31
31
|
|
|
32
32
|
</select>
|
|
33
33
|
</div>
|
package/dist/elements/widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js
CHANGED
|
@@ -8,7 +8,7 @@ export class MultipleSelectionRectExtensionProvider {
|
|
|
8
8
|
return new MultipleSelectionRectExtension(extensionManager, designerView, designItem);
|
|
9
9
|
}
|
|
10
10
|
static style = css `
|
|
11
|
-
.svg-multiple-rect-selection { stroke: #909090; stroke-dasharray: 3; fill: transparent; stroke-width: 2;
|
|
11
|
+
.svg-multiple-rect-selection { stroke: #909090; stroke-dasharray: 3; fill: transparent; stroke-width: 2; }
|
|
12
12
|
`;
|
|
13
13
|
}
|
|
14
14
|
//# sourceMappingURL=MultipleSelectionRectExtensionProvider.js.map
|
|
@@ -15,7 +15,7 @@ export class ResizeExtensionProvider {
|
|
|
15
15
|
return new ResizeExtension(extensionManager, designerView, designItem, this.resizeAllSelected);
|
|
16
16
|
}
|
|
17
17
|
static style = css `
|
|
18
|
-
.svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events:
|
|
18
|
+
.svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: auto; }
|
|
19
19
|
`;
|
|
20
20
|
}
|
|
21
21
|
//# sourceMappingURL=ResizeExtensionProvider.js.map
|
|
@@ -15,8 +15,8 @@ export class RotateExtensionProvider {
|
|
|
15
15
|
return new RotateExtension(extensionManager, designerView, designItem);
|
|
16
16
|
}
|
|
17
17
|
static style = css `
|
|
18
|
-
.svg-primary-rotate { stroke: #3899ec; fill: white; stroke-width: 1; pointer-events:
|
|
19
|
-
.svg-primary-rotate-transparent { fill: transparent; pointer-events:
|
|
18
|
+
.svg-primary-rotate { stroke: #3899ec; fill: white; stroke-width: 1; pointer-events: auto; cursor: alias; }
|
|
19
|
+
.svg-primary-rotate-transparent { fill: transparent; pointer-events: auto; cursor: alias; }
|
|
20
20
|
.svg-primary-rotate-line { stroke: #3899ec; fill: #3899ec; stroke-width: 1; }
|
|
21
21
|
`;
|
|
22
22
|
}
|
|
@@ -28,7 +28,7 @@ export class TransformOriginExtensionProvider {
|
|
|
28
28
|
return new TransformOriginExtension(extensionManager, designerView, designItem);
|
|
29
29
|
}
|
|
30
30
|
static style = css `
|
|
31
|
-
.svg-transform-origin { stroke: #3899ec; fill: black; pointer-events:
|
|
31
|
+
.svg-transform-origin { stroke: #3899ec; fill: black; pointer-events: auto; }
|
|
32
32
|
`;
|
|
33
33
|
}
|
|
34
34
|
//# sourceMappingURL=TransformOriginExtensionProvider.js.map
|
|
@@ -12,9 +12,9 @@ export class EditGridColumnRowSizesExtensionProvider {
|
|
|
12
12
|
return new EditGridColumnRowSizesExtension(extensionManager, designerCanvas, designItem);
|
|
13
13
|
}
|
|
14
14
|
static style = css `
|
|
15
|
-
.svg-grid-resizer-v { fill: transparent; cursor: ew-resize; pointer-events:
|
|
15
|
+
.svg-grid-resizer-v { fill: transparent; cursor: ew-resize; pointer-events: auto; }
|
|
16
16
|
.svg-grid-resizer-v:hover { fill: #ff7f5052; }
|
|
17
|
-
.svg-grid-resizer-h { fill: transparent; cursor: ns-resize; pointer-events:
|
|
17
|
+
.svg-grid-resizer-h { fill: transparent; cursor: ns-resize; pointer-events: auto; }
|
|
18
18
|
.svg-grid-resizer-h:hover { fill: #ff7f5052; }
|
|
19
19
|
`;
|
|
20
20
|
}
|
package/dist/elements/widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js
CHANGED
|
@@ -11,7 +11,7 @@ export class GridChildResizeExtensionProvider {
|
|
|
11
11
|
return new GridChildResizeExtension(extensionManager, designerView, designItem);
|
|
12
12
|
}
|
|
13
13
|
static style = css `
|
|
14
|
-
.svg-grid-resizer { stroke: #3899ec; fill: white; pointer-events:
|
|
14
|
+
.svg-grid-resizer { stroke: #3899ec; fill: white; pointer-events: auto; }
|
|
15
15
|
`;
|
|
16
16
|
}
|
|
17
17
|
//# sourceMappingURL=GridChildResizeExtensionProvider.js.map
|
|
@@ -6,11 +6,11 @@ export class GridChildToolbarExtension extends BasicStackedToolbarExtension {
|
|
|
6
6
|
<div style="height: 100%; width: 100%;">
|
|
7
7
|
<div style="display: flex; flex-direction: column;">
|
|
8
8
|
<span style="font-size: 10px; color: #00aff0;">column:</span>
|
|
9
|
-
<input type="text" title="column" id="gridColumn" style="pointer-events:
|
|
9
|
+
<input type="text" title="column" id="gridColumn" style="pointer-events: auto; height: 12px; width: 45px; padding: 0; margin-right: 5px">
|
|
10
10
|
</div>
|
|
11
11
|
<div style="display: flex; flex-direction: column;">
|
|
12
12
|
<span style="font-size: 10px; color: #00aff0;">row:</span>
|
|
13
|
-
<input type="text" title="column" id="gridRow" style="pointer-events:
|
|
13
|
+
<input type="text" title="column" id="gridRow" style="pointer-events: auto; height: 12px; width: 45px; padding: 0; margin-right: 10px">
|
|
14
14
|
</div>
|
|
15
15
|
<node-projects-image-button-list-selector property="align-self" no-value-in-header id="align-self">
|
|
16
16
|
<img title="start" data-value="start" src="${assetsPath}images/chromeDevtools/align-items-start-icon.svg">
|
|
@@ -5,7 +5,7 @@ export class GridToolbarExtension extends BasicStackedToolbarExtension {
|
|
|
5
5
|
static template = html `
|
|
6
6
|
<div style="height: 100%; width: 100%;">
|
|
7
7
|
${BasicStackedToolbarExtension.basicTemplate}
|
|
8
|
-
<select title="display" id="gridType" style="pointer-events:
|
|
8
|
+
<select title="display" id="gridType" style="pointer-events: auto; height: 24px; width: 60px; padding: 0; margin-right: 10px">
|
|
9
9
|
<option>1x1</option>
|
|
10
10
|
<option>1x16</option>
|
|
11
11
|
<option>2x8</option>
|
|
@@ -15,12 +15,12 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
|
|
|
15
15
|
overflow: visible;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.svg-invisible { stroke: transparent; fill: transparent; pointer-events:
|
|
18
|
+
.svg-invisible { stroke: transparent; fill: transparent; pointer-events: auto; }
|
|
19
19
|
.svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }
|
|
20
20
|
.svg-selector { stroke: black; fill: #3899ec55; stroke-width: 1; stroke-dasharray: 2; }
|
|
21
|
-
.svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events:
|
|
21
|
+
.svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: auto; }
|
|
22
22
|
.svg-position { stroke: black; stroke-dasharray: 2; }
|
|
23
|
-
.svg-path { stroke: #3899ec; fill: orange; pointer-events:
|
|
23
|
+
.svg-path { stroke: #3899ec; fill: orange; pointer-events: auto; }
|
|
24
24
|
.svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }
|
|
25
25
|
.svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }
|
|
26
26
|
.svg-toolbar-container { overflow: visible }
|
package/dist/index-min.js
CHANGED
|
@@ -272,7 +272,7 @@ var wd=Object.defineProperty;var u=(s,e)=>()=>(s&&(e=s(s=0)),e);var Sd=(s,e)=>{f
|
|
|
272
272
|
`||o===" "||o==="\r"||o==="\f")},_skipOptionalSpaces:function(){for(;this._currentIndex<this._endIndex&&this._isCurrentSpace();)this._currentIndex+=1;return this._currentIndex<this._endIndex},_skipOptionalSpacesOrDelimiter:function(){return this._currentIndex<this._endIndex&&!this._isCurrentSpace()&&this._string[this._currentIndex]!==","?!1:(this._skipOptionalSpaces()&&this._currentIndex<this._endIndex&&this._string[this._currentIndex]===","&&(this._currentIndex+=1,this._skipOptionalSpaces()),this._currentIndex<this._endIndex)},_parseNumber:function(){var o=0,a=0,l=1,c=0,h=1,d=1,p=this._currentIndex;if(this._skipOptionalSpaces(),this._currentIndex<this._endIndex&&this._string[this._currentIndex]==="+"?this._currentIndex+=1:this._currentIndex<this._endIndex&&this._string[this._currentIndex]==="-"&&(this._currentIndex+=1,h=-1),this._currentIndex===this._endIndex||(this._string[this._currentIndex]<"0"||this._string[this._currentIndex]>"9")&&this._string[this._currentIndex]!==".")return null;for(var f=this._currentIndex;this._currentIndex<this._endIndex&&this._string[this._currentIndex]>="0"&&this._string[this._currentIndex]<="9";)this._currentIndex+=1;if(this._currentIndex!==f)for(var m=this._currentIndex-1,g=1;m>=f;)a+=g*(this._string[m]-"0"),m-=1,g*=10;if(this._currentIndex<this._endIndex&&this._string[this._currentIndex]==="."){if(this._currentIndex+=1,this._currentIndex>=this._endIndex||this._string[this._currentIndex]<"0"||this._string[this._currentIndex]>"9")return null;for(;this._currentIndex<this._endIndex&&this._string[this._currentIndex]>="0"&&this._string[this._currentIndex]<="9";)l*=10,c+=(this._string.charAt(this._currentIndex)-"0")/l,this._currentIndex+=1}if(this._currentIndex!==p&&this._currentIndex+1<this._endIndex&&(this._string[this._currentIndex]==="e"||this._string[this._currentIndex]==="E")&&this._string[this._currentIndex+1]!=="x"&&this._string[this._currentIndex+1]!=="m"){if(this._currentIndex+=1,this._string[this._currentIndex]==="+"?this._currentIndex+=1:this._string[this._currentIndex]==="-"&&(this._currentIndex+=1,d=-1),this._currentIndex>=this._endIndex||this._string[this._currentIndex]<"0"||this._string[this._currentIndex]>"9")return null;for(;this._currentIndex<this._endIndex&&this._string[this._currentIndex]>="0"&&this._string[this._currentIndex]<="9";)o*=10,o+=this._string[this._currentIndex]-"0",this._currentIndex+=1}var _=a+c;return _*=h,o&&(_*=Math.pow(10,d*o)),p===this._currentIndex?null:(this._skipOptionalSpacesOrDelimiter(),_)},_parseArcFlag:function(){if(this._currentIndex>=this._endIndex)return null;var o=null,a=this._string[this._currentIndex];if(this._currentIndex+=1,a==="0")o=0;else if(a==="1")o=1;else return null;return this._skipOptionalSpacesOrDelimiter(),o}};var t=function(o){if(!o||o.length===0)return[];var a=new e(o),l=[];if(a.initialCommandIsMoveTo())for(;a.hasMoreData();){var c=a.parseSegment();if(c===null)break;l.push(c)}return l},i=function(o,a,l,c,h,d,p,f,m,g){var _=function(yt){return Math.PI*yt/180},b=function(yt,di,vt){var bd=yt*Math.cos(vt)-di*Math.sin(vt),_d=yt*Math.sin(vt)+di*Math.cos(vt);return{x:bd,y:_d}},C=_(p),k=[],P,D,A,R;if(g)P=g[0],D=g[1],A=g[2],R=g[3];else{var H=b(o,a,-C);o=H.x,a=H.y;var ae=b(l,c,-C);l=ae.x,c=ae.y;var V=(o-l)/2,xe=(a-c)/2,Re=V*V/(h*h)+xe*xe/(d*d);Re>1&&(Re=Math.sqrt(Re),h=Re*h,d=Re*d);var gt;f===m?gt=-1:gt=1;var Ke=h*h,Tt=d*d,dd=Ke*Tt-Ke*xe*xe-Tt*V*V,pd=Ke*xe*xe+Tt*V*V,Zi=gt*Math.sqrt(Math.abs(dd/pd));A=Zi*h*xe/d+(o+l)/2,R=Zi*-d*V/h+(a+c)/2,P=Math.asin(parseFloat(((a-R)/d).toFixed(9))),D=Math.asin(parseFloat(((c-R)/d).toFixed(9))),o<A&&(P=Math.PI-P),l<A&&(D=Math.PI-D),P<0&&(P=Math.PI*2+P),D<0&&(D=Math.PI*2+D),m&&P>D&&(P=P-Math.PI*2),!m&&D>P&&(D=D-Math.PI*2)}var _o=D-P;if(Math.abs(_o)>Math.PI*120/180){var md=D,ud=l,fd=c;m&&D>P?D=P+Math.PI*120/180*1:D=P+Math.PI*120/180*-1,l=A+h*Math.cos(D),c=R+d*Math.sin(D),k=i(l,c,ud,fd,h,d,p,0,m,[D,md,A,R])}_o=D-P;var gd=Math.cos(P),yd=Math.sin(P),vd=Math.cos(D),xd=Math.sin(D),$c=Math.tan(_o/4),qc=4/3*h*$c,Qc=4/3*d*$c,Jc=[o,a],Mt=[o+qc*yd,a-Qc*gd],eh=[l+qc*xd,c-Qc*vd],th=[l,c];if(Mt[0]=2*Jc[0]-Mt[0],Mt[1]=2*Jc[1]-Mt[1],g)return[Mt,eh,th].concat(k);k=[Mt,eh,th].concat(k);for(var ih=[],rt=0;rt<k.length;rt+=3){let yt=b(k[rt][0],k[rt][1],C),di=b(k[rt+1][0],k[rt+1][1],C),vt=b(k[rt+2][0],k[rt+2][1],C);ih.push([yt.x,yt.y,di.x,di.y,vt.x,vt.y])}return ih},r=function(o){var a=[],l=null,c=null,h=null,d=null;return o.forEach(function(p){var f=p.type;if(f==="M"){var m=p.values[0],g=p.values[1];a.push({type:"M",values:[m,g]}),h=m,d=g,l=m,c=g}else if(f==="m"){var m=l+p.values[0],g=c+p.values[1];a.push({type:"M",values:[m,g]}),h=m,d=g,l=m,c=g}else if(f==="L"){var m=p.values[0],g=p.values[1];a.push({type:"L",values:[m,g]}),l=m,c=g}else if(f==="l"){var m=l+p.values[0],g=c+p.values[1];a.push({type:"L",values:[m,g]}),l=m,c=g}else if(f==="C"){var _=p.values[0],b=p.values[1],C=p.values[2],k=p.values[3],m=p.values[4],g=p.values[5];a.push({type:"C",values:[_,b,C,k,m,g]}),l=m,c=g}else if(f==="c"){var _=l+p.values[0],b=c+p.values[1],C=l+p.values[2],k=c+p.values[3],m=l+p.values[4],g=c+p.values[5];a.push({type:"C",values:[_,b,C,k,m,g]}),l=m,c=g}else if(f==="Q"){var _=p.values[0],b=p.values[1],m=p.values[2],g=p.values[3];a.push({type:"Q",values:[_,b,m,g]}),l=m,c=g}else if(f==="q"){var _=l+p.values[0],b=c+p.values[1],m=l+p.values[2],g=c+p.values[3];a.push({type:"Q",values:[_,b,m,g]}),l=m,c=g}else if(f==="A"){var m=p.values[5],g=p.values[6];a.push({type:"A",values:[p.values[0],p.values[1],p.values[2],p.values[3],p.values[4],m,g]}),l=m,c=g}else if(f==="a"){var m=l+p.values[5],g=c+p.values[6];a.push({type:"A",values:[p.values[0],p.values[1],p.values[2],p.values[3],p.values[4],m,g]}),l=m,c=g}else if(f==="H"){var m=p.values[0];a.push({type:"H",values:[m]}),l=m}else if(f==="h"){var m=l+p.values[0];a.push({type:"H",values:[m]}),l=m}else if(f==="V"){var g=p.values[0];a.push({type:"V",values:[g]}),c=g}else if(f==="v"){var g=c+p.values[0];a.push({type:"V",values:[g]}),c=g}else if(f==="S"){var C=p.values[0],k=p.values[1],m=p.values[2],g=p.values[3];a.push({type:"S",values:[C,k,m,g]}),l=m,c=g}else if(f==="s"){var C=l+p.values[0],k=c+p.values[1],m=l+p.values[2],g=c+p.values[3];a.push({type:"S",values:[C,k,m,g]}),l=m,c=g}else if(f==="T"){var m=p.values[0],g=p.values[1];a.push({type:"T",values:[m,g]}),l=m,c=g}else if(f==="t"){var m=l+p.values[0],g=c+p.values[1];a.push({type:"T",values:[m,g]}),l=m,c=g}else(f==="Z"||f==="z")&&(a.push({type:"Z",values:[]}),l=h,c=d)}),a},n=function(o){var a=[],l=null,c=null,h=null,d=null,p=null,f=null,m=null;return o.forEach(function(g){if(g.type==="M"){var _=g.values[0],b=g.values[1];a.push({type:"M",values:[_,b]}),f=_,m=b,d=_,p=b}else if(g.type==="C"){var C=g.values[0],k=g.values[1],P=g.values[2],D=g.values[3],_=g.values[4],b=g.values[5];a.push({type:"C",values:[C,k,P,D,_,b]}),c=P,h=D,d=_,p=b}else if(g.type==="L"){var _=g.values[0],b=g.values[1];a.push({type:"L",values:[_,b]}),d=_,p=b}else if(g.type==="H"){var _=g.values[0];a.push({type:"L",values:[_,p]}),d=_}else if(g.type==="V"){var b=g.values[0];a.push({type:"L",values:[d,b]}),p=b}else if(g.type==="S"){var P=g.values[0],D=g.values[1],_=g.values[2],b=g.values[3],A,R;l==="C"||l==="S"?(A=d+(d-c),R=p+(p-h)):(A=d,R=p),a.push({type:"C",values:[A,R,P,D,_,b]}),c=P,h=D,d=_,p=b}else if(g.type==="T"){var _=g.values[0],b=g.values[1],C,k;l==="Q"||l==="T"?(C=d+(d-c),k=p+(p-h)):(C=d,k=p);var A=d+2*(C-d)/3,R=p+2*(k-p)/3,H=_+2*(C-_)/3,ae=b+2*(k-b)/3;a.push({type:"C",values:[A,R,H,ae,_,b]}),c=C,h=k,d=_,p=b}else if(g.type==="Q"){var C=g.values[0],k=g.values[1],_=g.values[2],b=g.values[3],A=d+2*(C-d)/3,R=p+2*(k-p)/3,H=_+2*(C-_)/3,ae=b+2*(k-b)/3;a.push({type:"C",values:[A,R,H,ae,_,b]}),c=C,h=k,d=_,p=b}else if(g.type==="A"){let Ke=Math.abs(g.values[0]),Tt=Math.abs(g.values[1]);var V=g.values[2],xe=g.values[3],Re=g.values[4],_=g.values[5],b=g.values[6];if(Ke===0||Tt===0)a.push({type:"C",values:[d,p,_,b,_,b]}),d=_,p=b;else if(d!==_||p!==b){var gt=i(d,p,_,b,Ke,Tt,V,xe,Re);gt.forEach(function(Zi){a.push({type:"C",values:Zi})}),d=_,p=b}}else g.type==="Z"&&(a.push(g),d=f,p=m);l=g.type}),a};SVGPathElement.prototype.getPathData=function(o){if(o&&o.normalize){let a;return a=t(this.getAttribute("d")||""),n(r(a))}else return t(this.getAttribute("d")||"")},SVGPathElement.prototype.setPathData=function(o){if(o.length===0)this.removeAttribute("d");else{let a="";for(let l=0,c=o.length;l<c;l+=1){let h=o[l];l>0&&(a+=" "),a+=h.type,h.values&&h.values.length>0&&(a+=" "+h.values.join(" "))}this.setAttribute("d",a)}},SVGRectElement.prototype.getPathData=function(o){var a=this.x.baseVal.value,l=this.y.baseVal.value,c=this.width.baseVal.value,h=this.height.baseVal.value,d=this.hasAttribute("rx")?this.rx.baseVal.value:this.ry.baseVal.value,p=this.hasAttribute("ry")?this.ry.baseVal.value:this.rx.baseVal.value;d>c/2&&(d=c/2),p>h/2&&(p=h/2);var f=[{type:"M",values:[a+d,l]},{type:"H",values:[a+c-d]},{type:"A",values:[d,p,0,0,1,a+c,l+p]},{type:"V",values:[l+h-p]},{type:"A",values:[d,p,0,0,1,a+c-d,l+h]},{type:"H",values:[a+d]},{type:"A",values:[d,p,0,0,1,a,l+h-p]},{type:"V",values:[l+p]},{type:"A",values:[d,p,0,0,1,a+d,l]},{type:"Z",values:[]}];return f=f.filter(function(m){return!(m.type==="A"&&(m.values[0]===0||m.values[1]===0))}),o&&o.normalize===!0&&(f=n(f)),f},SVGCircleElement.prototype.getPathData=function(o){var a=this.cx.baseVal.value,l=this.cy.baseVal.value,c=this.r.baseVal.value,h=[{type:"M",values:[a+c,l]},{type:"A",values:[c,c,0,0,1,a,l+c]},{type:"A",values:[c,c,0,0,1,a-c,l]},{type:"A",values:[c,c,0,0,1,a,l-c]},{type:"A",values:[c,c,0,0,1,a+c,l]},{type:"Z",values:[]}];return o&&o.normalize===!0&&(h=n(h)),h},SVGEllipseElement.prototype.getPathData=function(o){var a=this.cx.baseVal.value,l=this.cy.baseVal.value,c=this.rx.baseVal.value,h=this.ry.baseVal.value,d=[{type:"M",values:[a+c,l]},{type:"A",values:[c,h,0,0,1,a,l+h]},{type:"A",values:[c,h,0,0,1,a-c,l]},{type:"A",values:[c,h,0,0,1,a,l-h]},{type:"A",values:[c,h,0,0,1,a+c,l]},{type:"Z",values:[]}];return o&&o.normalize===!0&&(d=n(d)),d},SVGLineElement.prototype.getPathData=function(){return[{type:"M",values:[this.x1.baseVal.value,this.y1.baseVal.value]},{type:"L",values:[this.x2.baseVal.value,this.y2.baseVal.value]}]},SVGPolylineElement.prototype.getPathData=function(){for(var o=[],a=0;a<this.points.numberOfItems;a+=1){var l=this.points.getItem(a);o.push({type:a===0?"M":"L",values:[l.x,l.y]})}return o},SVGPolygonElement.prototype.getPathData=function(){for(var o=[],a=0;a<this.points.numberOfItems;a+=1){var l=this.points.getItem(a);o.push({type:a===0?"M":"L",values:[l.x,l.y]})}return o.push({type:"Z",values:[]}),o}})()});function j(s){return hh()?s.metaKey:s.ctrlKey}var Oe=u(()=>{"use strict";Pe()});function aa(s){let e=[];for(let t of s)t.nodeType===E.TextNode||t.nodeType===E.Comment||e.push(t);return e}var Be,Wt=u(()=>{"use strict";Te();Or();_e();De();Ne();Oe();$();te();Be=class{serviceForContainer(e,t,i){return i!=null&&i.getComputedStyle()?.position=="absolute"?!0:!(t.display==="grid"||t.display==="inline-grid"||t.display==="flex"||t.display==="inline-flex")}isEnterableContainer(e){return!(K.IsSelfClosingElement(e.element.localName)||!e.isRootItem&&e.element.shadowRoot&&e.element.shadowRoot.querySelector("slot")==null)}canEnter(e,t){return!(!this.isEnterableContainer(e)||!t.every(i=>!i.element.contains(e.element)&&i!==e))}canLeave(e,t){return!0}getElementOffset(e,t){return e.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(e.element)}calculateTrack(e,t,i,r,n,o){let a=n.x-i.x,l=n.y-i.y;if(!j(e)){if(t.alignOnGrid){let c=Lr(o,"position");c.x=c.x%t.gridSize,c.y=c.y%t.gridSize,a=Math.round(a/t.gridSize)*t.gridSize-c.x,l=Math.round(l/t.gridSize)*t.gridSize-c.y}else if(t.alignOnSnap){let c=W(o.element),h=t.snapLines.snapToPosition({x:n.x-r.x,y:n.y-r.y},{width:c.width/t.scaleFactor,height:c.height/t.scaleFactor},{x:a>0?1:-1,y:l>0?1:-1});h.x!==null?a=h.x-Math.round(i.x)+Math.round(r.x):a=Math.round(a),h.y!==null?l=h.y-Math.round(i.y)+Math.round(r.y):l=Math.round(l)}}return{x:a,y:l}}placePoint(e,t,i,r,n,o,a){let l=o.x,c=o.y;if(!j(e)){if(t.alignOnGrid)l=Math.round(l/t.gridSize)*t.gridSize,c=Math.round(c/t.gridSize)*t.gridSize;else if(t.alignOnSnap){let h=t.snapLines.snapToPosition({x:o.x-n.x,y:o.y-n.y},null,{x:l>0?1:-1,y:c>0?1:-1});h.x!==null?l=h.x:l=Math.round(l),h.y!==null?c=h.y:c=Math.round(c)}}return{x:l,y:c}}startPlace(e,t,i,r,n,o,a){}place(e,t,i,r,n,o,a){let l=this.calculateTrack(e,t,r,n,o,a[0]);e.shiftKey&&(l=Ze({x:0,y:0},l,!0));let c=ne(aa(a));for(let h of c){let d=h.instanceServiceContainer.designerCanvas.canvas,p=h.parent.element.getBoxQuads({relativeTo:d,iframes:h.instanceServiceContainer.designerCanvas.iframes})[0],f=h.parent.element.convertPointFromNode(new DOMPoint(l.x+p.p1.x,l.y+p.p1.y),d,{iframes:h.instanceServiceContainer.designerCanvas.iframes}),m=getComputedStyle(h.element),g=new DOMMatrix;m.rotate!="none"&&m.rotate&&(g=g.multiply(new DOMMatrix("rotate("+m.rotate.replace(" ",",")+")"))),m.scale!="none"&&m.scale&&(g=g.multiply(new DOMMatrix("scale("+m.scale.replace(" ",",")+")"))),f=g.inverse().transformPoint(f);let _=new DOMMatrix().translate(f.x,f.y);Nr(h.element,h.getStyle("transform"),_.toString())}a[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(c,"place",!1)}moveElements(e,t,i){for(let r of e)t.x&&r.setStyle("left",parseInt(r.element.style.left)-t.x+"px"),t.y&&r.setStyle("top",parseInt(r.element.style.top)-t.y+"px");e[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(e),e[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(e,"place",!0)}enterContainer(e,t,i){let r=ne(t);for(let n of r)i=="drop"&&n.setStyle("position","absolute"),e.insertChild(n),n.lastContainerSize&&(n.hasStyle("width")||n.setStyle("width",n.lastContainerSize.width+"px"),n.hasStyle("height")||n.setStyle("height",n.lastContainerSize.height+"px"));t[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(r,"place",!0)}leaveContainer(e,t){let i=ne(t);t[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(i,"place",!0)}finishPlace(e,t,i,r,n,o,a){let l=ne(a);for(let c of l){let h=Gt(new DOMMatrix(c.element.style.transform)),d=Gt(new DOMMatrix(c.getStyle("transform")??""));c.element.style.transform=c.getStyle("transform")??"";let p={x:h.x,y:h.y},f=getComputedStyle(c.element),m=new DOMMatrix;f.rotate!="none"&&f.rotate&&(m=m.multiply(new DOMMatrix("rotate("+f.rotate.replace(" ",",")+")"))),f.scale!="none"&&f.scale&&(m=m.multiply(new DOMMatrix("scale("+f.scale.replace(" ",",")+")"))),p=m.transformPoint(p),Rr(i,c,{x:p.x-d.x,y:p.y-d.y},"position")}for(let c of a)t.extensionManager.removeExtension(c,w.Placement);a[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(l,"place",!0)}}});var ht,Ai=u(()=>{"use strict";Q();xr();ht=class{async parse(e,t,i,r){let n;Document.parseHTMLUnsafe&&!vr?n=Document.parseHTMLUnsafe(e):n=new DOMParser().parseFromString(e,"text/html",{includeShadowRoots:!0});let o=this.createDesignItems(n.head.childNodes,t,i),a=this.createDesignItems(n.body.childNodes,t,i);return[...o,...a]}createDesignItems(e,t,i){let r=[];for(let n of e)r.push(this._createDesignItemsRecursive(n,t,i));return r}_createDesignItemsRecursive(e,t,i){return T.createDesignItemFromInstance(e,t,i)}}});var Fr,la=u(()=>{"use strict";Ot();ue();ie();Fr=class extends Fe{name="lit2";isHandledElement(e){return!!e.element.constructor.elementProperties}async getProperties(e){if(!this.isHandledElement(e))return null;let t=[];for(let i of e.element.constructor.elementProperties.entries()){let r=i[0],n=i[1],o=n;if(n.type&&(o=n.type),o===String){let a={name:r,type:"string",service:this,propertyType:y.propertyAndAttribute};t.push(a)}else if(o===Object){let a={name:r,type:"string",service:this,propertyType:y.propertyAndAttribute};t.push(a)}else if(o===Number){let a={name:r,type:"number",service:this,propertyType:y.propertyAndAttribute};t.push(a)}else if(o===Date){let a={name:r,type:"date",service:this,propertyType:y.propertyAndAttribute};t.push(a)}else if(o===Boolean){let a={name:r,type:"boolean",service:this,propertyType:y.propertyAndAttribute};t.push(a)}else if(N.isTypescriptEnum(o)){let a={name:r,type:"enum",enumValues:N.getTypescriptEnumEntries(o),service:this,propertyType:y.propertyAndAttribute};t.push(a)}}return t}_notifyChangedProperty(e,t,i){}}});function xh(s,e){ca||(ca=document.createElement("canvas"));let t=ca.getContext("2d");return t.font=e,t.measureText(s).width}var ca,bh=u(()=>{"use strict"});var U,$e=u(()=>{"use strict";(function(s){s.Pointer="Pointer",s.DrawSelection="DrawSelection",s.DrawPath="DrawPath",s.DrawRect="DrawRect",s.DrawEllipsis="DrawEllipsis",s.DrawLine="DrawLine",s.Zoom="Zoom",s.Pan="Pan",s.MagicWandSelector="MagicWandSelector",s.RectangleSelector="RectangleSelector",s.PickColor="PickColor",s.Text="Text",s.DrawElementTool="DrawElementTool",s.Guides="Guides",s.Inspect="Inspect",s.Accessibility="Accessibility",s.Position="Position",s.Padding="Padding",s.Margin="Margin",s.Flexbox="Flexbox",s.Move="Move",s.HueShift="HueShift",s.BoxShadows="BoxShadows",s.FontStyles="FontStyles"})(U||(U={}))});var I,Z=u(()=>{"use strict";(function(s){s[s.Background=10]="Background",s[s.Normal=20]="Normal",s[s.Foreground=30]="Foreground"})(I||(I={}))});var jt,ha=u(()=>{"use strict";Z();jt=class{overlays=[];overlayLayerView;extensionManager;designerCanvas;constructor(e,t){this.extensionManager=e,this.designerCanvas=t,this.overlayLayerView=t.overlayLayer}_backup;_valuesHaveChanges(...e){if(this._backup==null)return this._backup=e,!0;for(let t=0;t<e.length;t++)if(e[t]!==this._backup[t])return this._backup=e,!0;return!1}_removeAllOverlays(){for(let e of this.overlays)try{this.overlayLayerView.removeOverlay(e)}catch(t){console.error(t)}this.overlays=[]}_addOverlay(e,t=I.Normal){this.overlayLayerView.addOverlay(this.constructor.name,e,t),this.overlays.push(e)}_drawGroup(e,t,i){let r=this.overlayLayerView.drawGroup(this.constructor.name,e,t,i);return t||this.overlays.push(r),r}_drawLine(e,t,i,r,n,o,a){let l=this.overlayLayerView.drawLine(this.constructor.name,e,t,i,r,n,o,a);return o||this.overlays.push(l),l}_drawCircle(e,t,i,r,n,o){let a=this.overlayLayerView.drawCircle(this.constructor.name,e,t,i,r,n,o);return n||this.overlays.push(a),a}_drawRect(e,t,i,r,n,o,a){let l=this.overlayLayerView.drawRect(this.constructor.name,e,t,i,r,n,o,a);return o||this.overlays.push(l),l}_drawComplexRect(e,t,i,r){let n="M"+e.map(a=>a.x+","+a.y).join(" ")+"Z",o=this.overlayLayerView.drawPath(this.constructor.name,n,t,i,r);return i||this.overlays.push(o),o}_drawPath(e,t,i,r){let n=this.overlayLayerView.drawPath(this.constructor.name,e,t,i,r);return i||this.overlays.push(n),n}_drawText(e,t,i,r,n,o){let a=this.overlayLayerView.drawText(this.constructor.name,e,t,i,r,n,o);return n||this.overlays.push(a),a}_drawHTML(e,t,i,r,n,o,a,l){let c=this.overlayLayerView.drawHTML(this.constructor.name,e,t,i,r,n,o,a,l);return a||this.overlays.push(c),c}_drawTextWithBackground(e,t,i,r,n,o,a){let l=this.overlayLayerView.drawTextWithBackground(this.constructor.name,e,t,i,r,n,o,a);return o||this.overlays.push(...l),l}_drawTransformedRect(e,t,i,r){let n="M"+e.p1.x+" "+e.p1.y+" L"+e.p2.x+" "+e.p2.y+" L"+e.p3.x+" "+e.p3.y+" L"+e.p4.x+" "+e.p4.y+"Z",o=this.overlayLayerView.drawPath(this.constructor.name,n,t,i,r);return i||this.overlays.push(o),o}}});var L,J=u(()=>{"use strict";ha();Z();L=class extends jt{extendedItem;constructor(e,t,i){super(e,t),this.extendedItem=i}remove(){this.extensionManager.removeExtensionInstance(this.extendedItem,this)}createToolbar(e,t,i,r=I.Foreground){let n=e.content.cloneNode(!0);n.querySelectorAll("*").forEach(a=>{a.onpointerdown=l=>{this.designerCanvas.ignoreEvent(l)},a instanceof HTMLInputElement&&(a.addEventListener("keydown",l=>{this.designerCanvas.ignoreEvent(l)},{capture:!0}),a.addEventListener("keyup",l=>{this.designerCanvas.ignoreEvent(l)},{capture:!0}))});let o=document.createElementNS("http://www.w3.org/2000/svg","foreignObject");return o.classList.add("svg-toolbar-container"),o.setAttribute("width",""+t),o.setAttribute("height",""+i),o.appendChild(n),o.style.scale=""+1/this.designerCanvas.zoomFactor,o.style.transformBox="fill-box",this._addOverlay(o,r),o.updatePosition=a=>{o.style.scale=""+1/this.designerCanvas.zoomFactor;let l=this.overlayLayerView.getBoundingClientRect(),c=o.children[0].getBoundingClientRect(),h=this.designerCanvas.scaleFactor,d=l.width/h-this.designerCanvas.canvasOffset.x*h;c.width+a.x*h>d&&(a.x=(d-c.width)/h),a.x<-this.designerCanvas.canvasOffset.x&&(a.x=-this.designerCanvas.canvasOffset.x),o.setAttribute("x",""+a.x),o.setAttribute("y",""+a.y)},o.getById=a=>o.querySelector("#"+a),o}}});var tp,zr,da=u(()=>{"use strict";te();bh();$e();J();tp=60,zr=class extends L{_rect;_clickRect;_text;_width;_createTitleText;constructor(e,t,i,r){super(e,t,i),this._createTitleText=r}extend(e,t){let i=this.extendedItem.element.getBoxQuads({relativeTo:this.designerCanvas.canvas})[0];if(i&&!isNaN(i.p1.x)){let r=W(this.extendedItem.element),n=xh(this.extendedItem.name,"10px monospace"),o=Math.sqrt(Math.pow(i.p2.x-i.p1.x,2)+Math.pow(i.p2.y-i.p1.y,2)),a=this.extendedItem.name;this.extendedItem.id&&(a="#"+this.extendedItem.id),this._createTitleText&&(a=this._createTitleText(this.extendedItem)),this._width=Math.max(Math.min(o,n),tp),this._rect=this._drawRect(i.p1.x,i.p1.y,this._width,15,"svg-primary-selection-move",this._rect),this._clickRect=this._drawRect(i.p1.x,i.p1.y,this._width,18,"svg-invisible",this._clickRect),this._clickRect.style.background="transparent",this._text=this._drawHTML('<div style="position:relative; pointer-events: none;"><span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 0; padding-left: 2px;">'+a+"</span></div>",(r.x-this.designerCanvas.containerBoundingRect.x)/this.designerCanvas.scaleFactor,i.p1.y-16,this._width,15,"svg-text-primary",this._text),this._text.style.overflow="visible",this._clickRect.addEventListener("pointerdown",l=>this._pointerEvent(l)),this._clickRect.addEventListener("pointermove",l=>this._pointerEvent(l)),this._clickRect.addEventListener("pointerup",l=>this._pointerEvent(l)),this._clickRect.addEventListener("contextmenu",l=>{l.preventDefault(),this.designerCanvas.showDesignItemContextMenu(this.extendedItem,l)}),this.refresh(e,t)}}_drawMoveOverlay(e){}refresh(e,t){let i=this.extendedItem.element.getBoxQuads({relativeTo:this.designerCanvas.canvas})[0];if(!isNaN(i.p1.x)){let r=Math.atan2(i.p2.y-i.p1.y,i.p2.x-i.p1.x)*180/Math.PI;if(this._valuesHaveChanges(i.p1.x,i.p1.y,r,this.designerCanvas.scaleFactor)){let n=15/this.designerCanvas.scaleFactor,o=-(16/this.designerCanvas.scaleFactor),a=this._width/this.designerCanvas.scaleFactor;this._rect.setAttribute("x",""+i.p1.x),this._rect.setAttribute("y",""+i.p1.y),this._rect.style.rotate=r+"deg",this._rect.style.translate="0 "+o+"px",this._rect.style.transformOrigin="0 100%",this._rect.style.transformBox="fill-box",this._rect.setAttribute("height",""+n),this._rect.setAttribute("width",""+a),this._rect.style.strokeWidth=(1/this.designerCanvas.scaleFactor).toString(),this._clickRect.setAttribute("x",""+i.p1.x),this._clickRect.setAttribute("y",""+i.p1.y),this._clickRect.style.rotate=r+"deg",this._clickRect.style.translate="0 "+o+"px",this._clickRect.style.transformOrigin="0 100%",this._clickRect.style.transformBox="fill-box",this._clickRect.setAttribute("height",""+(n+3)),this._clickRect.setAttribute("width",""+a),this._clickRect.style.strokeWidth=(1/this.designerCanvas.scaleFactor).toString(),this._text.setAttribute("x",""+i.p1.x),this._text.setAttribute("y",""+i.p1.y),this._text.style.fontSize=10/this.designerCanvas.scaleFactor+"px",this._text.setAttribute("height",""+n),this._text.setAttribute("width",""+a),this._text.children[0].children[0].style.rotate=r+"deg",this._text.children[0].children[0].style.translate="0 "+o+"px",this._text.children[0].children[0].style.transformOrigin="0 100%"}}}_pointerEvent(e){e.preventDefault(),e.stopPropagation(),e.button!=2&&this.designerCanvas.serviceContainer.designerTools.get(U.Pointer).pointerEventHandler(this.designerCanvas,e,this.extendedItem.element)}dispose(){this._removeAllOverlays()}}});import{css as ip}from"@node-projects/base-custom-webcomponent";var Vr,pa=u(()=>{"use strict";da();Vr=class{_createTitleText;constructor(e){this._createTitleText=e}shouldExtend(e,t,i){return!i.isRootItem&&!(i.element instanceof HTMLTemplateElement)}getExtension(e,t,i){return new zr(e,t,i,this._createTitleText)}static style=ip`
|
|
273
273
|
.svg-text-primary { stroke: none; color: white; font-family: monospace; }
|
|
274
274
|
`}});var x,ee=u(()=>{"use strict";(function(s){s.PointerDown="pointerdown",s.PointerMove="pointermove",s.PointerUp="pointerup",s.DragEnter="dragenter",s.DragEnd="dragend",s.DragLeave="dragleave",s.DragOver="dragover",s.Drop="drop",s.Scroll="scroll",s.Wheel="wheel",s.ContextMenu="contextmenu",s.KeyDown="keydown",s.KeyUp="keyup",s.DblClick="dblclick"})(x||(x={}))});function ma(s,e,t){if(!s)return null;let i={px:n=>n,cm:n=>n*38,mm:n=>n*3.8,q:n=>n*.95,in:n=>n*96,pc:n=>n*16,pt:n=>n*1.333333,rem:n=>n*parseFloat(getComputedStyle(document.documentElement).fontSize),em:n=>n*parseFloat(getComputedStyle(e).fontSize),vw:n=>n/100*window.innerWidth,vh:n=>n/100*window.innerHeight,vmin:n=>n/100*(window.innerHeight<window.innerWidth?window.innerHeight:window.innerWidth),vmax:n=>n/100*(window.innerHeight>window.innerWidth?window.innerHeight:window.innerWidth),lh:n=>n*parseFloat(getComputedStyle(e).lineHeight),rlh:n=>n*parseFloat(getComputedStyle(document.documentElement).lineHeight),"%":n=>n/100*(t=="height"?Br(e).height:Br(e).width),ms:n=>n,s:n=>n*1e3,deg:n=>n,rad:n=>n*(180/Math.PI),grad:n=>n*(180/200),turn:n=>n*360},r=s.trim().match(_h);if(r){let n=Number(r[1]),o=r[2].toLowerCase();if(o in i)return i[o](n)}return s}function Et(s){let e=s.trim().match(_h);return e?e[2].toLowerCase():null}function Ut(s,e,t,i,r){if(!s)return null;let n={px:o=>o,cm:o=>o/38,mm:o=>o/3.8,q:o=>o/.95,in:o=>o/96,pc:o=>o/16,pt:o=>o/1.333333,rem:o=>o/parseFloat(getComputedStyle(document.documentElement).fontSize),em:o=>o/parseFloat(getComputedStyle(e).fontSize),vw:o=>o*100/window.innerWidth,vh:o=>o*100/window.innerHeight,vmin:o=>o*100/(window.innerHeight<window.innerWidth?window.innerHeight:window.innerWidth),vmax:o=>o*100/(window.innerHeight>window.innerWidth?window.innerHeight:window.innerWidth),lh:o=>o/parseFloat(getComputedStyle(e).lineHeight),rlh:o=>o/parseFloat(getComputedStyle(document.documentElement).lineHeight),"%":o=>o*100/(t=="height"?Br(e).height:Br(e).width),ms:o=>o,s:o=>o/1e3,deg:o=>o,rad:o=>o/(180/Math.PI),grad:o=>o/(180/200),turn:o=>o/360};if(typeof s=="string"&&(s=ma(s,e,t)),i in n){let o=n[i](s);return r?r(o)+i:o+i}return r?r(s):s}function Br(s){return{width:s.offsetWidth,height:s.offsetHeight}}function np(s){let e=s.split(" "),t=[];for(let i=0;i<e.length;i++){let r=e[i];if(r.startsWith("repeat("))for(;!r.includes(")");)i++,e[i]&&(r+=e[i]);t.push(r)}return t}function wh(s){let e=np(s),t=[];for(let i of e)if(i.startsWith("repeat(")){let r=i.split(",");for(let n=0;n<parseInt(r[0].substring(7));n++)t.push(r[1].substring(0,r[1].length-1))}else t.push(i);return t.map(i=>Et(i))}var rp,_h,ua=u(()=>{"use strict";rp=["px","cm","mm","q","in","pc","pt","rem","em","vw","vh","vmin","vmax","lh","rlh","%","ms","s","deg","rad","grad","turn","cqw","cqh","cqi","cqb","cqmin","cqmax","fr"],_h=new RegExp(`^([-+]?(?:\\d+(?:\\.\\d+)?))(${rp.join("|")})$`,"i")});var Hr,fa=u(()=>{"use strict";ee();ua();te();_e();J();Hr=class extends L{_startPos;_circle;_circle2;_oldValue;_offsetInControl;constructor(e,t,i){super(e,t,i)}refresh(e,t){let r=getComputedStyle(this.extendedItem.element).transformOrigin.split(" "),n=this.designerCanvas.canvas.convertPointFromNode({x:parseFloat(r[0]),y:parseFloat(r[1])},this.extendedItem.element);this._valuesHaveChanges(n.x,n.y,this.designerCanvas.zoomFactor)&&(this._removeAllOverlays(),this._circle=this._drawCircle(n.x,n.y,5/this.designerCanvas.zoomFactor,"svg-transform-origin"),this._circle.style.strokeWidth=(1/this.designerCanvas.zoomFactor).toString(),this._circle.style.cursor="pointer",this._circle2=this._drawCircle(n.x,n.y,1/this.designerCanvas.zoomFactor,"svg-transform-origin"),this._circle2.style.strokeWidth=(1/this.designerCanvas.zoomFactor).toString(),this._circle2.style.pointerEvents="none",this._circle.addEventListener(x.PointerDown,o=>this.pointerEvent(o)),this._circle.addEventListener(x.PointerMove,o=>this.pointerEvent(o)),this._circle.addEventListener(x.PointerUp,o=>this.pointerEvent(o)))}extend(e,t){let r=getComputedStyle(this.extendedItem.element).transformOrigin.split(" "),n=this.designerCanvas.canvas.convertPointFromNode({x:parseFloat(r[0]),y:parseFloat(r[1])},this.extendedItem.element);if(isNaN(n.x)||isNaN(n.y)){this.remove();return}else{let o=this.extendedItem.getStyleFromSheetOrLocal("transform-origin");o&&(this._oldValue=o),this.refresh(e,t)}}pointerEvent(e){e.stopPropagation();let t=getComputedStyle(this.extendedItem.element),i=t.transformOrigin.split(" "),r=[];r[0]=parseFloat(i[0])/parseFloat(this.extendedItem.element.style.width),r[1]=parseFloat(i[1])/parseFloat(this.extendedItem.element.style.height);let n=this.designerCanvas.canvas.convertPointFromNode({x:parseFloat(i[0]),y:parseFloat(i[1])},this.extendedItem.element),o=this.designerCanvas.getNormalizedEventCoordinates(e),a=this.extendedItem.element.convertPointFromNode(o,this.designerCanvas.canvas),l=this.designerCanvas.getNormalizedEventCoordinates(e);switch(e.type){case x.PointerDown:e.target.setPointerCapture(e.pointerId);let c=W(e.target);this._offsetInControl={x:c.width/2+(c.x-e.x),y:c.height/2+(c.y-e.y)},this._startPos={x:l.x,y:l.y};break;case x.PointerMove:if(this._startPos&&e.buttons>0){let h=l.x-this._startPos.x,d=l.y-this._startPos.y;this._circle.setAttribute("cx",n.x+h),this._circle.setAttribute("cy",n.y+d),this._circle2.setAttribute("cx",n.x+h),this._circle2.setAttribute("cy",n.y+d)}break;case x.PointerUp:if(e.target.releasePointerCapture(e.pointerId),this._startPos){a.x+=this._offsetInControl.x,a.y+=this._offsetInControl.y;let h=this.extendedItem.openGroup("change transform-origin"),d=this.extendedItem.element.getBoxQuads({relativeTo:this.designerCanvas.rootDesignItem.element})[0];if(this._oldValue)try{let m=this._oldValue.split(" "),g=Ut(a.x,this.extendedItem.element,"width",Et(m[0]),b=>O(this.extendedItem,b)),_=Ut(a.x,this.extendedItem.element,"width",Et(m[0]),b=>O(this.extendedItem,b));m.length>1&&(_=Ut(a.y,this.extendedItem.element,"height",Et(m[1]),b=>O(this.extendedItem,b))),this.extendedItem.updateStyleInSheetOrLocal("transform-origin",g+" "+_)}catch{this.extendedItem.updateStyleInSheetOrLocal("transform-origin",O(this.extendedItem,a.x)+"px "+O(this.extendedItem,a.y)+"px")}else this.extendedItem.updateStyleInSheetOrLocal("transform-origin",O(this.extendedItem,a.x)+"px "+O(this.extendedItem,a.y)+"px");let p=this.extendedItem.element.getBoxQuads({relativeTo:this.designerCanvas.rootDesignItem.element})[0],f={x:d.p1.x-p.p1.x,y:d.p1.y-p.p1.y};t.translate&&t.translate!=="none"&&(f.x+=parseFloat(t.translate.split(" ")[0]),t.translate.split(" ").length===1?f.y+=parseFloat(t.translate.split(" ")[0]):f.y+=parseFloat(t.translate.split(" ")[1])),this.extendedItem.updateStyleInSheetOrLocal("translate",O(this.extendedItem,f.x)+"px "+O(this.extendedItem,f.y)+"px"),h.commit(),this.refresh(null,null),this._startPos=null}break}}dispose(){this._removeAllOverlays()}}});import{css as sp}from"@node-projects/base-custom-webcomponent";var Gr,ga=u(()=>{"use strict";fa();te();Gr=class{showOnlyWhenSet;constructor(e=!0){this.showOnlyWhenSet=e}shouldExtend(e,t,i){if(!i.isRootItem&&i.node instanceof HTMLElement||i.node instanceof SVGElement&&i.node.localName==="svg"){if(!this.showOnlyWhenSet||i.hasStyle("transformOrigin"))return!0;let r=getComputedStyle(i.element);if(r.display!="inline"&&i.element.getBoundingClientRect){let n=W(i.element),o=r.transformOrigin.split(" "),a=parseFloat(o[0])-n.width/2,l=parseFloat(o[1])-n.height/2;if(a>.5||a<-.5||l>.5||l<-.5)return!0}}return!1}getExtension(e,t,i){return new Hr(e,t,i)}static style=sp`
|
|
275
|
-
.svg-transform-origin { stroke: #3899ec; fill: black; pointer-events:
|
|
275
|
+
.svg-transform-origin { stroke: #3899ec; fill: black; pointer-events: auto; }
|
|
276
276
|
`}});var Wr,ya=u(()=>{"use strict";J();Z();Wr=class extends L{constructor(e,t,i){super(e,t,i)}_path;_path2;extend(e,t){this.refresh(e,t)}refresh(e,t){let i=getComputedStyle(this.extendedItem.element);if(i.margin!=="0px"){let r=Number.parseFloat(i.marginLeft.replace("px","")),n=Number.parseFloat(i.marginTop.replace("px","")),o=Number.parseFloat(i.marginRight.replace("px","")),a=Number.parseFloat(i.marginBottom.replace("px",""));if(!isNaN(r)&&!isNaN(n)&&!isNaN(o)&&!isNaN(a)){let l=this.extendedItem.element.getBoxQuads({box:"border",relativeTo:this.designerCanvas.canvas})[0];if(!isNaN(l.p1.x)&&this._valuesHaveChanges(r,n,o,a,l.p1.x,l.p1.y,l.p2.x,l.p2.y,l.p3.x,l.p3.y,l.p4.x,l.p4.y)){let c=this.extendedItem.element.getBoxQuads({box:"margin",relativeTo:this.designerCanvas.canvas})[0],h="M"+[l.p1,l.p2,l.p3,l.p4].map(d=>d.x+","+d.y).join(" ")+"Z ";h+="M"+[c.p1,c.p2,c.p3,c.p4].map(d=>d.x+","+d.y).join(" ")+"Z ",this._path=this._drawPath(h,"svg-margin-fill",this._path,I.Background),this._path2=this._drawPath(h,"svg-margin",this._path2,I.Background)}}}}dispose(){this._removeAllOverlays()}}});import{css as op}from"@node-projects/base-custom-webcomponent";var jr,va=u(()=>{"use strict";ya();$();jr=class{shouldExtend(e,t,i){return i.nodeType==E.Element}getExtension(e,t,i){return new Wr(e,t,i)}style=op`
|
|
277
277
|
.svg-margin-fill { fill: color(display-p3 1 0 1 / 15%); fill-rule: evenodd; }
|
|
278
278
|
.svg-margin { fill: color(display-p3 1 0 1 / 80%); fill-rule: evenodd; mask: url(#mask-stripe-margin); }
|
|
@@ -290,19 +290,19 @@ var wd=Object.defineProperty;var u=(s,e)=>()=>(s&&(e=s(s=0)),e);var Sd=(s,e)=>{f
|
|
|
290
290
|
`}});var le,Sa=u(()=>{"use strict";(function(s){s.DragOrSelect="DragOrSelect",s.Drag="Drag",s.Resize="Resize",s.Rotate="Rotate",s.DrawSelection="DrawSelection",s.DrawingSelection="DrawingSelection"})(le||(le={}))});var Zr,Ca=u(()=>{"use strict";ee();Sa();Q();De();$e();Oe();Zr=class s{cursor="default";_minMoveOffset=5;_movedSinceStartedAction=!1;_initialPoint;_actionType;_actionStartedDesignItem;_actionStartedDesignItems;_clonedItems;_copiedItemsInserted=!1;_previousEventName;_dragOverExtensionItem;_dragParentExtensionItem;_moveItemsOffset={x:0,y:0};_initialOffset;_started=!1;_holdTimeout;_firstTimeInMove;_secondTimeInMove;_changeGroup;constructor(){}activated(e){}dispose(){}_showContextMenu(e,t){if(e.preventDefault(),!j(e)){let i=t.elementsFromPoint(e.x,e.y);for(let o of t.instanceServiceContainer.selectionService.selectedElements)if(i.indexOf(o.element)>=0){t.showDesignItemContextMenu(t.instanceServiceContainer.selectionService.primarySelection,e);return}let r=t.serviceContainer.elementAtPointService.getElementAtPoint(t,{x:e.x,y:e.y}),n=T.GetOrCreateDesignItem(r,r,t.serviceContainer,t.instanceServiceContainer);t.instanceServiceContainer.selectionService.isSelected(n)||t.instanceServiceContainer.selectionService.setSelectedElements([n],e),t.showDesignItemContextMenu(n,e)}}pointerEventHandler(e,t,i){j(t)?this.cursor="copy":this.cursor="default";let r=e.serviceContainer.elementInteractionServices;if(r){for(let a of r)if(a.stopEventHandling(e,t,i))return}if(t.button==2&&t.type==x.PointerDown){this._showContextMenu(t,e);return}if(j(t)&&t.shiftKey||t.buttons==4){let a=e.serviceContainer.designerTools.get(U.Pan);if(a){a.pointerEventHandler(e,t,i);return}}switch(t.type){case x.PointerDown:t.target.setPointerCapture(t.pointerId),e.captureActiveTool(this),this._movedSinceStartedAction=!1,this._copiedItemsInserted=!1,this._clonedItems=null,this._firstTimeInMove=!1,this._secondTimeInMove=!1;break;case x.PointerUp:t.target.releasePointerCapture(t.pointerId),e.releaseActiveTool(),this._copiedItemsInserted=!1,this._clonedItems=null,this._firstTimeInMove=!1,this._secondTimeInMove=!1;break;case x.PointerMove:this._firstTimeInMove&&(this._secondTimeInMove=!0),this._secondTimeInMove?this._firstTimeInMove=!1:this._firstTimeInMove=!0;break}if(!i)return;let n=e.getNormalizedEventCoordinates(t),o=T.GetOrCreateDesignItem(i,i,e.serviceContainer,e.instanceServiceContainer);this._actionType==null&&(this._initialPoint=n,this._initialOffset=e.getNormalizedOffsetInElement(t,i),t.shiftKey?(t.preventDefault(),this._actionType=le.DrawSelection):t.type==x.PointerDown&&(this._actionStartedDesignItem=o,this._actionStartedDesignItems=[...e.instanceServiceContainer.selectionService.selectedElements],e.snapLines.clearSnaplines(),o!==e.rootDesignItem?this._actionType=le.Drag:i===e||i===e.rootDesignItem.element||i==null?this._actionType=le.DrawSelection:this._actionType=le.DragOrSelect)),t.type===x.PointerMove&&(this._movedSinceStartedAction=this._movedSinceStartedAction||Math.abs(n.x-this._initialPoint.x)>this._minMoveOffset||Math.abs(n.y-this._initialPoint.y)>this._minMoveOffset,this._actionType==le.DrawSelection&&(this._actionType=le.DrawingSelection)),this._actionType==le.DrawSelection||this._actionType==le.DrawingSelection?this._pointerActionTypeDrawSelection(e,t,i):(this._actionType==le.DragOrSelect||this._actionType==le.Drag)&&this._pointerActionTypeDragOrSelect(e,t,o,n),t.type==x.PointerUp&&(e.snapLines.clearSnaplines(),this._actionType==le.DrawSelection&&o!==e.rootDesignItem&&e.instanceServiceContainer.selectionService.setSelectedElements([o],t),this._resetTool()),this._previousEventName=t.type}_resetTool(){this._actionType=null,this._actionStartedDesignItem=null,this._actionStartedDesignItems=null,this._movedSinceStartedAction=!1,this._initialPoint=null}_pointerActionTypeDrawSelection(e,t,i){let r=e.serviceContainer.designerTools.get(U.DrawSelection);r&&(this._resetTool(),r.pointerEventHandler(e,t,i))}async _pointerActionTypeDragOrSelect(e,t,i,r,n=!1){if(this._holdTimeout&&(clearTimeout(this._holdTimeout),this._holdTimeout=null),t.altKey&&t.type==x.PointerDown){let o=e.instanceServiceContainer.selectionService.primarySelection;if(o){let a=e.elementsFromPoint(t.x,t.y),l=a.indexOf(o.element);l>=0&&l++;let c=a[l];c&&(i=T.GetOrCreateDesignItem(c,c,e.serviceContainer,e.instanceServiceContainer))}}switch(t.type){case x.PointerDown:{this._actionStartedDesignItem=i,this._moveItemsOffset={x:0,y:0},this._actionStartedDesignItems=[...e.instanceServiceContainer.selectionService.selectedElements],e.alignOnSnap&&e.snapLines.calculateSnaplines(e.instanceServiceContainer.selectionService.selectedElements);break}case x.PointerMove:{if(t.buttons==0)return;if(this._firstTimeInMove&&(i.instanceServiceContainer.selectionService.selectedElements.includes(i)||(j(t)?i.instanceServiceContainer.selectionService.setSelectedElements([...i.instanceServiceContainer.selectionService.selectedElements,i],t):i.instanceServiceContainer.selectionService.setSelectedElements([i],t),this._actionStartedDesignItems=[...e.instanceServiceContainer.selectionService.selectedElements],e.alignOnSnap&&e.snapLines.calculateSnaplines(e.instanceServiceContainer.selectionService.selectedElements))),!this._clonedItems){this._clonedItems=[];for(let a of this._actionStartedDesignItems){let l=await a.clone();this._clonedItems&&l&&this._clonedItems.push(l)}}if(!this._actionStartedDesignItem)return;if(this._changeGroup||(this._changeGroup=e.rootDesignItem.openGroup("Move Elements"),window.addEventListener("pointerup",()=>{this._changeGroup?.abort(),this._changeGroup=null},{once:!0})),j(t)&&!this._copiedItemsInserted){this._changeGroup.title="Copy Elements",this._copiedItemsInserted=!0;for(let a=0;a<this._clonedItems.length;a++)this._actionStartedDesignItems[a].insertAdjacentElement(this._clonedItems[a],"beforebegin");e.instanceServiceContainer.contentService.onContentChanged.emit({changeType:"added",designItems:this._clonedItems})}else if(!j(t)&&this._copiedItemsInserted){this._changeGroup.title="Move Elements";for(let a of this._clonedItems)a.remove();this._copiedItemsInserted=!1,e.instanceServiceContainer.contentService.onContentChanged.emit({changeType:"removed",designItems:this._clonedItems})}let o=r.x!=this._initialPoint.x||r.y!=this._initialPoint.y;if(this._actionType!=le.Drag&&o&&(this._actionType=le.Drag),this._movedSinceStartedAction){let a=getComputedStyle(this._actionStartedDesignItem.parent.element),l=e.serviceContainer.getLastServiceWhere("containerService",c=>c.serviceForContainer(this._actionStartedDesignItem.parent,a,this._actionStartedDesignItem));if(l){let c=this._actionStartedDesignItem.parent;this._dragParentExtensionItem!=c?(e.extensionManager.removeExtension(this._dragParentExtensionItem,w.ContainerDrag),e.extensionManager.applyExtension(c,w.ContainerDrag,t),this._dragParentExtensionItem=c):e.extensionManager.refreshExtension(c,w.ContainerDrag);let h=l.canLeave(this._actionStartedDesignItem.parent,this._actionStartedDesignItems),d=null,p=null;if(h&&([d,p]=s.FindPossibleContainer(this._actionStartedDesignItem,this._actionStartedDesignItems,t),d!=null?this._dragOverExtensionItem!=d?(e.extensionManager.removeExtension(this._dragOverExtensionItem,w.ContainerDragOverAndCanBeEntered),e.extensionManager.applyExtension(d,w.ContainerDragOverAndCanBeEntered,t),this._dragOverExtensionItem=d):e.extensionManager.refreshExtension(d,w.ContainerDragOverAndCanBeEntered,t):this._dragOverExtensionItem&&(e.extensionManager.removeExtension(this._dragOverExtensionItem,w.ContainerDragOverAndCanBeEntered),this._dragOverExtensionItem=null)),p&&(this._holdTimeout=setTimeout(()=>{this._pointerActionTypeDragOrSelect(e,t,i,r,!0)},1e3)),p&&(t.altKey||n)){let f=l.getElementOffset(this._actionStartedDesignItem.parent,this._actionStartedDesignItem),m=p.getElementOffset(d,this._actionStartedDesignItem);this._moveItemsOffset={x:m.x-f.x+this._moveItemsOffset.x,y:m.y-f.y+this._moveItemsOffset.y},l.leaveContainer(this._actionStartedDesignItem.parent,this._actionStartedDesignItems);let g={x:r.x-this._moveItemsOffset.x,y:r.y-this._moveItemsOffset.y};p.enterContainer(d,this._actionStartedDesignItems,"normal"),p.place(t,e,this._actionStartedDesignItem.parent,this._initialPoint,this._initialOffset,g,this._actionStartedDesignItems),e.extensionManager.removeExtension(this._dragParentExtensionItem,w.ContainerDrag),e.extensionManager.applyExtension(d,w.ContainerDrag,t),this._dragParentExtensionItem=d,e.extensionManager.removeExtension(this._dragOverExtensionItem,w.ContainerDragOverAndCanBeEntered),this._dragOverExtensionItem=null,e.extensionManager.refreshAllAppliedExtentions()}else{let f={x:r.x-this._moveItemsOffset.x,y:r.y-this._moveItemsOffset.y};if(!this._started){for(let m of this._actionStartedDesignItems)e.extensionManager.removeExtension(m,w.Placement),e.extensionManager.removeExtension(m,w.MouseOver),e.extensionManager.applyExtension(m,w.Placement,t);l.startPlace(t,e,this._actionStartedDesignItem.parent,this._initialPoint,this._initialOffset,f,this._actionStartedDesignItems),this._started=!0}l.place(t,e,this._actionStartedDesignItem.parent,this._initialPoint,this._initialOffset,f,this._actionStartedDesignItems)}e.extensionManager.refreshExtensions(this._actionStartedDesignItems,null,t,null,20)}}break}case x.PointerUp:{if(this._started=!1,!this._movedSinceStartedAction||this._actionType==le.DragOrSelect){this._previousEventName==x.PointerDown&&!j(t)?e.instanceServiceContainer.selectionService.setSelectedElements([this._actionStartedDesignItem],t):this.checkSelectElement(t,e,i);return}if(this._movedSinceStartedAction){let o=getComputedStyle(this._actionStartedDesignItem.parent.element),a=e.serviceContainer.getLastServiceWhere("containerService",c=>c.serviceForContainer(this._actionStartedDesignItem.parent,o,this._actionStartedDesignItem)),l={x:r.x-this._moveItemsOffset.x,y:r.y-this._moveItemsOffset.y};if(a){this._changeGroup||(this._changeGroup=e.rootDesignItem.openGroup("Move Elements"));try{a.finishPlace(t,e,this._actionStartedDesignItem.parent,this._initialPoint,this._initialOffset,l,e.instanceServiceContainer.selectionService.selectedElements),this._changeGroup.commit(),this._changeGroup=null}catch(h){console.error(h),this._changeGroup.abort()}this._changeGroup=null;let c=e.elementsFromPoint(t.x,t.y);for(let h of this._actionStartedDesignItems)c.includes(h.element)&&e.extensionManager.applyExtension(h,w.MouseOver,t),e.extensionManager.removeExtension(h,w.Placement)}else this._changeGroup&&this._changeGroup.abort(),this._changeGroup=null;e.extensionManager.removeExtension(this._dragParentExtensionItem,w.ContainerDrag),this._dragParentExtensionItem=null,e.extensionManager.removeExtension(this._dragOverExtensionItem,w.ContainerDragOverAndCanBeEntered),this._dragOverExtensionItem=null,this._moveItemsOffset={x:0,y:0}}e.extensionManager.refreshExtensions(e.instanceServiceContainer.selectionService.selectedElements,null,t,null,20),this._changeGroup&&(this._changeGroup.abort(),this._changeGroup=null);break}}}checkSelectElement(e,t,i){if(j(e)){let r=t.instanceServiceContainer.selectionService.selectedElements.indexOf(i);if(r>=0){let n=t.instanceServiceContainer.selectionService.selectedElements.slice(0);n.splice(r,1),t.instanceServiceContainer.selectionService.setSelectedElements(n,e)}else{let n=t.instanceServiceContainer.selectionService.selectedElements.slice(0);n.push(i),t.instanceServiceContainer.selectionService.setSelectedElements(n,e)}}else t.instanceServiceContainer.selectionService.selectedElements.indexOf(i)<0&&t.instanceServiceContainer.selectionService.setSelectedElements([i],e)}static FindPossibleContainer(e,t,i){let r=null,n=null,o=e.instanceServiceContainer.designerCanvas,a=o.elementsFromPoint(i.x,i.y);a.push(o.rootDesignItem.element);for(let l of a)if(l!=e.element){if(l==e.parent.element)break;if(l==o.rootDesignItem.element){r=o.rootDesignItem;let c=getComputedStyle(r.element);n=o.serviceContainer.getLastServiceWhere("containerService",h=>h.serviceForContainer(r,c,e));break}else{r=T.GetOrCreateDesignItem(l,l,o.serviceContainer,o.instanceServiceContainer);let c=getComputedStyle(r.element);if(n=o.serviceContainer.getLastServiceWhere("containerService",h=>h.serviceForContainer(r,c,e)),n){if(n.canEnter(r,t))break;r=null,n=null;continue}}}return[r,n]}keyboardEventHandler(e,t,i){}}});var oe,He=u(()=>{"use strict";oe=class{constructor(e,t,i){this.title="Insert Item",this.containerItem=e,this.index=t,this.newItem=i}title;get affectedItems(){return[this.containerItem,this.newItem]}undo(){this.newItem.parent._removeChildInternal(this.newItem),this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({changeType:"removed",designItems:[this.newItem]})}do(){this.containerItem._insertChildInternal(this.newItem,this.index),this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({changeType:"added",designItems:[this.newItem]})}containerItem;index;newItem;mergeWith(e){return!1}}});var $r,Ea=u(()=>{"use strict";ee();Ne();He();Q();Z();$r=class{cursor="crosshair";_pathD;_path;_samePoint=!1;_p2pMode=!1;_dragMode=!1;_pointerMoved=!1;_eventStarted=!1;_lastPoint;_startPoint;constructor(){}activated(e){}dispose(){}pointerEventHandler(e,t,i){let r=e.getNormalizedEventCoordinates(t),n=10;switch(t.type){case x.PointerDown:this._eventStarted=!0,this._p2pMode||(t.target.setPointerCapture(t.pointerId),e.captureActiveTool(this),this._path=document.createElementNS("http://www.w3.org/2000/svg","path"),this._pathD="M "+r.x+" "+r.y+" ",this._path.setAttribute("d",this._pathD),this._path.setAttribute("stroke",e.serviceContainer.globalContext.strokeColor),this._path.setAttribute("fill",e.serviceContainer.globalContext.fillBrush),this._path.setAttribute("stroke-width",e.serviceContainer.globalContext.strokeThickness),e.overlayLayer.addOverlay(this.constructor.name,this._path,I.Foreground),this._startPoint=r),this._lastPoint!=null&&this._lastPoint.x===r.x&&this._lastPoint.y===r.y&&!this._samePoint&&(this._samePoint=!0),this._lastPoint==null&&(this._lastPoint=r),this._startPoint==null&&(this._startPoint=r);break;case x.PointerMove:if(this._eventStarted&&(this._pointerMoved=!0),!this._p2pMode)this._dragMode=!0,this._path&&(this._pathD+="L "+r.x+" "+r.y+" ",this._path.setAttribute("d",this._pathD));else if(this._path){let o=r;t.shiftKey&&(o=Ze(this._lastPoint,r)),this._path.setAttribute("d",this._pathD+"L "+o.x+" "+o.y)+""}break;case x.PointerUp:if(this._eventStarted&&!this._pointerMoved&&(this._p2pMode=!0),this._p2pMode&&!this._samePoint&&this._startPoint.x!=r.x&&this._startPoint.y!=r.y&&this._path)if(t.shiftKey){let o=Ze(this._lastPoint,r);this._pathD+="L "+o.x+" "+o.y+" ",this._path.setAttribute("d",this._pathD),this._lastPoint=o}else this._pathD+="L "+r.x+" "+r.y+" ",this._path.setAttribute("d",this._pathD),this._lastPoint=r;if(this._samePoint&&this._p2pMode||this._dragMode&&!this._p2pMode){t.target.releasePointerCapture(t.pointerId),e.releaseActiveTool(),this._eventStarted=!1,this._p2pMode=!1,this._pointerMoved=!1,this._samePoint=!1,this._dragMode=!1;let o=e.getNormalizedElementCoordinates(this._path);e.overlayLayer.removeOverlay(this._path);let a=document.createElementNS("http://www.w3.org/2000/svg","svg"),l=o.x-n,c=o.y-n,h=vh(this._path,l,c);this._path.setAttribute("d",h),this._path.removeAttribute("stroke"),this._path.removeAttribute("stroke-width"),this._path.removeAttribute("overlay-source"),a.appendChild(this._path),a.style.left=l+"px",a.style.top=c+"px",a.style.position="absolute",a.style.width=Math.round(o.width+2*n)+"px",a.style.height=Math.round(o.height+2*n)+"px",a.style.overflow="visible",a.style.stroke=e.serviceContainer.globalContext.strokeColor,a.style.strokeWidth=e.serviceContainer.globalContext.strokeThickness,this._path=null,this._pathD=null,this._lastPoint=null;let d=T.createDesignItemFromInstance(a,e.serviceContainer,e.instanceServiceContainer);e.instanceServiceContainer.undoService.execute(new oe(e.rootDesignItem,e.rootDesignItem.childCount,d)),e.serviceContainer.globalContext.finishedWithTool(this)}break}t.preventDefault(),t.stopPropagation()}keyboardEventHandler(e,t,i){}}});var qr,Aa=u(()=>{"use strict";J();qr=class extends L{_line1;_line2;_line3;_line4;constructor(e,t,i){super(e,t,i)}extend(e,t){this.refresh(e)}refresh(e,t){let i=this.extendedItem.element.getBoxQuads({box:"border",relativeTo:this.designerCanvas.canvas})[0];if(i){if(isNaN(i.p1.x)||isNaN(i.p2.x)){this.remove();return}this._valuesHaveChanges(this.designerCanvas.zoomFactor,i.p1.x,i.p1.y,i.p2.x,i.p2.y,i.p3.x,i.p3.y,i.p4.x,i.p4.y)&&(this._line1=this._drawLine(i.p1.x,i.p1.y,i.p2.x,i.p2.y,"svg-selection",this._line1),this._line2=this._drawLine(i.p1.x,i.p1.y,i.p4.x,i.p4.y,"svg-selection",this._line2),this._line3=this._drawLine(i.p2.x,i.p2.y,i.p3.x,i.p3.y,"svg-selection",this._line3),this._line4=this._drawLine(i.p4.x,i.p4.y,i.p3.x,i.p3.y,"svg-selection",this._line4),this._line1.style.strokeWidth=(2/this.designerCanvas.zoomFactor).toString(),this._line2.style.strokeWidth=(2/this.designerCanvas.zoomFactor).toString(),this._line3.style.strokeWidth=(2/this.designerCanvas.zoomFactor).toString(),this._line4.style.strokeWidth=(2/this.designerCanvas.zoomFactor).toString())}}dispose(){this._removeAllOverlays()}}});import{css as cp}from"@node-projects/base-custom-webcomponent";var Qr,Pa=u(()=>{"use strict";Aa();$();Qr=class{shouldExtend(e,t,i){return!i.isRootItem&&i.nodeType!=E.Comment&&!(i.element instanceof HTMLTemplateElement)}getExtension(e,t,i){return new qr(e,t,i)}static style=cp`
|
|
291
291
|
.svg-selection { stroke: #3899ec; fill: transparent; stroke-width: 2; }
|
|
292
292
|
`}});function Ia(s=window){s.Node.prototype.getBoxQuads||(s.Node.prototype.getBoxQuads=function(e){return mp(this,e)}),s.Node.prototype.convertQuadFromNode||(s.Node.prototype.convertQuadFromNode=function(e,t,i){return hp(this,e,t,i)}),s.Node.prototype.convertRectFromNode||(s.Node.prototype.convertRectFromNode=function(e,t,i){return dp(this,e,t,i)}),s.Node.prototype.convertPointFromNode||(s.Node.prototype.convertPointFromNode=function(e,t,i){return pp(this,e,t,i)})}function hp(s,e,t,i){let r=dt(t,document.body,i?.iframes),n=dt(s,document.body,i?.iframes).inverse();i?.fromBox&&i?.fromBox!=="border"&&(e=new DOMQuad(ge(e.p1,i.fromBox,(s.ownerDocument.defaultView??window).getComputedStyle(t),-1),ge(e.p2,i.fromBox,(s.ownerDocument.defaultView??window).getComputedStyle(t),-1),ge(e.p3,i.fromBox,(s.ownerDocument.defaultView??window).getComputedStyle(t),-1),ge(e.p4,i.fromBox,(s.ownerDocument.defaultView??window).getComputedStyle(t),-1)));let o=new DOMQuad(n.transformPoint(r.transformPoint(e.p1)),n.transformPoint(r.transformPoint(e.p2)),n.transformPoint(r.transformPoint(e.p3)),n.transformPoint(r.transformPoint(e.p4)));return i?.toBox&&i?.toBox!=="border"&&(s instanceof Element||s instanceof(s.ownerDocument.defaultView??window).Element)&&(o=new DOMQuad(ge(o.p1,i.toBox,(s.ownerDocument.defaultView??window).getComputedStyle(s),-1),ge(o.p2,i.toBox,(s.ownerDocument.defaultView??window).getComputedStyle(s),-1),ge(o.p3,i.toBox,(s.ownerDocument.defaultView??window).getComputedStyle(s),-1),ge(o.p4,i.toBox,(s.ownerDocument.defaultView??window).getComputedStyle(s),-1))),o}function dp(s,e,t,i){let r=dt(t,(s.ownerDocument.defaultView??window).document.body.parentElement,i?.iframes),n=dt(s,(s.ownerDocument.defaultView??window).document.body.parentElement,i?.iframes).inverse();if(i?.fromBox&&i?.fromBox!=="border"){let a=ge(new DOMPoint(e.x,e.y),i.fromBox,(s.ownerDocument.defaultView??window).getComputedStyle(t),1);e=new DOMRect(a.x,a.y,e.width,e.height)}let o=new DOMQuad(n.transformPoint(r.transformPoint(new DOMPoint(e.x,e.y))),n.transformPoint(r.transformPoint(new DOMPoint(e.x+e.width,e.y))),n.transformPoint(r.transformPoint(new DOMPoint(e.x+e.width,e.y+e.height))),n.transformPoint(r.transformPoint(new DOMPoint(e.x,e.y+e.height))));return i?.toBox&&i?.toBox!=="border"&&(s instanceof Element||s instanceof(s.ownerDocument.defaultView??window).Element)&&(o=new DOMQuad(ge(o.p1,i.toBox,(s.ownerDocument.defaultView??window).getComputedStyle(s),-1),ge(o.p2,i.toBox,(s.ownerDocument.defaultView??window).getComputedStyle(s),-1),ge(o.p3,i.toBox,(s.ownerDocument.defaultView??window).getComputedStyle(s),-1),ge(o.p4,i.toBox,(s.ownerDocument.defaultView??window).getComputedStyle(s),-1))),o}function pp(s,e,t,i){let r=dt(t,(s.ownerDocument.defaultView??window).document.body.parentElement,i?.iframes),n=dt(s,document.body,i?.iframes).inverse();i?.fromBox&&i?.fromBox!=="border"&&(e=ge(e,i.fromBox,(s.ownerDocument.defaultView??window).getComputedStyle(t),1));let o=n.transformPoint(r.transformPoint(e));return i?.toBox&&i?.toBox!=="border"&&(s instanceof Element||s instanceof(s.ownerDocument.defaultView??window).Element)&&(o=ge(o,i.toBox,(s.ownerDocument.defaultView??window).getComputedStyle(s),-1)),o}function ge(s,e,t,i){return e==="margin"?new DOMPoint(s.x-i*parseFloat(t.marginLeft),s.y-i*parseFloat(t.marginTop)):e==="padding"?new DOMPoint(s.x+i*parseFloat(t.borderLeftWidth),s.y+i*parseFloat(t.borderTopWidth)):e==="content"?new DOMPoint(s.x+i*(parseFloat(t.borderLeftWidth)+parseFloat(t.paddingLeft)),s.y+i*(parseFloat(t.borderTopWidth)+parseFloat(t.paddingTop))):s}function At(){Kt.clear(),Yt.clear()}function Eh(){qe=new WeakMap,Kt=new Map,Yt=new Map}function mp(s,e){let t;if(Kt){let h=qe.get(s);h===void 0&&qe.set(s,h=Jr++);let d=qe.get(e?.relativeTo??document.body);d===void 0&&qe.set(e?.relativeTo??document.body,d=Jr++),t=h+"_"+d+"_"+(e?.box??"border");let p=Kt.get(t);if(p)return p}let i=dt(s,e?.relativeTo??document.body,e?.iframes),{width:r,height:n}=ka(s,i),o=[{x:0,y:0},{x:r,y:0},{x:r,y:n},{x:0,y:n}],a=Array(4),l=null;if(s instanceof Element||s instanceof(s.ownerDocument.defaultView??window).Element){if(e?.box==="margin"){let h=(s.ownerDocument.defaultView??window).getComputedStyle(s);l=[{x:parseFloat(h.marginLeft),y:parseFloat(h.marginTop)},{x:-parseFloat(h.marginRight),y:parseFloat(h.marginTop)},{x:-parseFloat(h.marginRight),y:-parseFloat(h.marginBottom)},{x:parseFloat(h.marginLeft),y:-parseFloat(h.marginBottom)}]}else if(e?.box==="padding"){let h=(s.ownerDocument.defaultView??window).getComputedStyle(s);l=[{x:-parseFloat(h.borderLeftWidth),y:-parseFloat(h.borderTopWidth)},{x:parseFloat(h.borderRightWidth),y:-parseFloat(h.borderTopWidth)},{x:parseFloat(h.borderRightWidth),y:parseFloat(h.borderBottomWidth)},{x:-parseFloat(h.borderLeftWidth),y:parseFloat(h.borderBottomWidth)}]}else if(e?.box==="content"){let h=(s.ownerDocument.defaultView??window).getComputedStyle(s);l=[{x:-parseFloat(h.borderLeftWidth)-parseFloat(h.paddingLeft),y:-parseFloat(h.borderTopWidth)-parseFloat(h.paddingTop)},{x:parseFloat(h.borderRightWidth)+parseFloat(h.paddingRight),y:-parseFloat(h.borderTopWidth)-parseFloat(h.paddingTop)},{x:parseFloat(h.borderRightWidth)+parseFloat(h.paddingRight),y:parseFloat(h.borderBottomWidth)+parseFloat(h.paddingBottom)},{x:-parseFloat(h.borderLeftWidth)-parseFloat(h.paddingLeft),y:parseFloat(h.borderBottomWidth)+parseFloat(h.paddingBottom)}]}}for(let h=0;h<4;h++){let d;l?d=new DOMPoint(o[h].x-l[h].x,o[h].y-l[h].y):d=new DOMPoint(o[h].x,o[h].y),a[h]=up(d,i).matrixTransform(i),a[h]=fp(a[h])}let c=[new DOMQuad(a[0],a[1],a[2],a[3])];return Kt&&Kt.set(t,c),c}function up(s,e){let t=-(s.x*e.m13+s.y*e.m23+e.m43)/e.m33;return new DOMPoint(s.x,s.y,t,1)}function fp(s){return new DOMPoint(s.x/s.w,s.y/s.w)}function ka(s,e){let t=0,i=0;if(s instanceof HTMLElement||s instanceof(s.ownerDocument.defaultView??window).HTMLElement)t=s.offsetWidth,i=s.offsetHeight;else if(s instanceof SVGSVGElement||s instanceof(s.ownerDocument.defaultView??window).SVGSVGElement)t=s.width.baseVal.value,i=s.height.baseVal.value;else if(s instanceof SVGGraphicsElement||s instanceof(s.ownerDocument.defaultView??window).SVGGraphicsElement){let r=s.getBBox();t=r.width,i=r.height}else if(s instanceof MathMLElement||s instanceof(s.ownerDocument.defaultView??window).MathMLElement){let r=s.getBoundingClientRect();t=r.width/(e?.a??1),i=r.height/(e?.d??1)}else if(s instanceof Text||s instanceof(s.ownerDocument.defaultView??window).Text){let r=document.createRange();r.selectNodeContents(s);let n=r.getBoundingClientRect();t=n.width/(e?.a??1),i=n.height/(e?.d??1)}return{width:t,height:i}}function Sh(s,e,t){if(s instanceof HTMLElement||s instanceof(s.ownerDocument.defaultView??window).HTMLElement)return new DOMPoint(s.offsetLeft-(e?s.scrollLeft:0),s.offsetTop-(e?s.scrollTop:0));if(s instanceof Text||s instanceof(s.ownerDocument.defaultView??window).Text){let i=document.createRange();i.selectNodeContents(s);let r=i.getBoundingClientRect(),n=Xt(s,t),o=n.getBoundingClientRect(),a=n.offsetWidth/o.width,l=n.offsetHeight/o.height;return new DOMPoint((r.x-o.x)*a,(r.y-o.y)*l)}else if(s instanceof Element||s instanceof(s.ownerDocument.defaultView??window).Element){if((s instanceof SVGGraphicsElement||s instanceof(s.ownerDocument.defaultView??window).SVGGraphicsElement)&&!(s instanceof SVGSVGElement||s instanceof(s.ownerDocument.defaultView??window).SVGSVGElement)){let h=s.getBBox();return new DOMPoint(h.x,h.y)}let i=(s.ownerDocument.defaultView??window).getComputedStyle(s);if(i.position==="absolute")return new DOMPoint(parseFloat(i.left),parseFloat(i.top));let r=Xt(s,t),n=dt(r,document.body,t),o=s.getBoundingClientRect(),a=n.inverse().transformPoint(o),l=r.getBoundingClientRect(),c=n.inverse().transformPoint(l);return new DOMPoint(a.x-c.x,a.y-c.y)}}function dt(s,e,t){let i;if(Yt){let c=qe.get(s);c===void 0&&qe.set(s,c=Jr++);let h=qe.get(e);h===void 0&&qe.set(e,h=Jr++),i=c+"_"+h;let d=Yt.get(i);if(d)return d}let r=s,n,o=pt(r,t),a=Xt(r,t);a&&(r.ownerDocument.defaultView??window).getComputedStyle(a).transformStyle!=="preserve-3d"&&Ch(o);let l=null;for(;r!=e&&r!=null;){let c=Xt(r,t);if(r.assignedSlot!=null){let h=(a.ownerDocument.defaultView??window).getComputedStyle(r);h.position!=="static"&&(o=new DOMMatrix().translate(parseFloat(h.left),parseFloat(h.top)).multiply(o))}else if(r instanceof HTMLElement||r instanceof(r.ownerDocument.defaultView??window).HTMLElement){if(l!==r.offsetParent&&!(r instanceof HTMLSlotElement||r instanceof(r.ownerDocument.defaultView??window).HTMLSlotElement)){let h=Sh(r,r!==s,t);l=r.offsetParent,o=new DOMMatrix().translate(h.x,h.y).multiply(o)}}else{let h=Sh(r,r!==s,t);l=null,o=new DOMMatrix().translate(h.x,h.y).multiply(o)}if(c&&(n=pt(c,t),c!=e&&(o=n.multiply(o)),a=Xt(c,t),a&&(a.ownerDocument.defaultView??window).getComputedStyle(a).transformStyle!=="preserve-3d"&&Ch(o),c===e))return(c.scrollTop||c.scrollLeft)&&(o=new DOMMatrix().translate(-c.scrollLeft,-c.scrollTop).multiply(o)),o;r=c}return Yt&&Yt.set(i,o),o}function Xt(s,e){if((s instanceof Element||s instanceof(s.ownerDocument.defaultView??window).Element)&&s.assignedSlot)return s.assignedSlot;if(s.parentElement==null&&(s.parentNode instanceof ShadowRoot||s.parentNode instanceof(s.ownerDocument.defaultView??window).ShadowRoot))return s.parentNode.host;if((s instanceof HTMLHtmlElement||s instanceof(s.ownerDocument.defaultView??window).HTMLHtmlElement)&&e){for(let t of e)if(t?.contentDocument==s.ownerDocument)return t}return s.parentElement}function pt(s,e){if(s instanceof Text||s instanceof(s.ownerDocument.defaultView??window).Text)return new DOMMatrix;let t=(s.ownerDocument.defaultView??window).getComputedStyle(s),i=new DOMMatrix,r=t.transformOrigin.split(" "),n=parseFloat(r[0]),o=parseFloat(r[1]),a=r[2]?parseFloat(r[2]):0,l=new DOMMatrix().translate(n,o,a);if(t.translate!="none"&&t.translate){let d=t.translate;if(d.includes("%")){let p=d.split(" "),f=s.getBoundingClientRect();p[0].endsWith("%")&&(p[0]=parseFloat(p[0])*f.width/100+"px"),p[1]?.endsWith("%")&&(p[1]=parseFloat(p[1])*f.height/100+"px"),d=p.join(",")}i=i.multiply(new DOMMatrix("translate("+d.replace(" ",",")+")"))}t.rotate!="none"&&t.rotate&&(i=i.multiply(new DOMMatrix("rotate("+t.rotate.replace(" ",",")+")"))),t.scale!="none"&&t.scale&&(i=i.multiply(new DOMMatrix("scale("+t.scale.replace(" ",",")+")"))),t.transform!="none"&&t.transform&&(i=i.multiply(new DOMMatrix(t.transform)));let c=l.multiply(i.multiply(l.inverse())),h=gp(s,e);return h!=null&&(c=h.multiply(c)),c}function Ch(s){if(s.m31=0,s.m32=0,s.m13=0,s.m23=0,s.m33=1,s.m43=0,s.m34=0,s.m14==0&&s.m24==0&&s.m44!=1&&s.m44!=0){let e=1/s.m44;s.m11*=e,s.m12*=e,s.m21*=e,s.m22*=e,s.m41*=e,s.m42*=e,s.m44=1}}function gp(s,e){let t=Xt(s,e);if(t){let i=(s.ownerDocument.defaultView??window).getComputedStyle(t);if(i.perspective!=="none"){let r=new DOMMatrix,n=parseFloat(i.perspective);if(r.m34=-1/n,i.perspectiveOrigin){let o=i.perspectiveOrigin.split(" "),a=parseFloat(o[0])-s.offsetLeft,l=parseFloat(o[1])-s.offsetTop,c=new DOMMatrix().translate(a,l),h=new DOMMatrix().translate(-a,-l);return c.multiply(r.multiply(h))}}}return null}var qe,Kt,Yt,Jr,Pt=u(()=>{"use strict";Jr=0});function en(s,e){switch(e){case"left":let t=getComputedStyle(s).left;return s.style.removeProperty("right"),s.style.left=t,t;case"top":let i=getComputedStyle(s).top;return s.style.removeProperty("bottom"),s.style.top=i,i}}var tn,Da=u(()=>{"use strict";ee();te();_e();Or();Pt();J();tn=class extends L{resizeAllSelected;_initialSizes;_actionModeStarted;_initialPoint;_offsetPoint;_circle1;_circle2;_circle3;_circle4;_circle5;_circle6;_circle7;_circle8;_initialComputedTransformOrigins;_initialTransformOrigins;constructor(e,t,i,r){super(e,t,i),this.resizeAllSelected=r}extend(e,t){this.refresh(e,t)}refresh(e,t){let i=this.extendedItem.element.getBoxQuads({box:"border",relativeTo:this.designerCanvas.canvas})[0];if(i){if(isNaN(i.p1.x)||isNaN(i.p1.x)){this.remove();return}this._valuesHaveChanges(this.designerCanvas.zoomFactor,i.p1.x,i.p1.y,i.p2.x,i.p2.y,i.p3.x,i.p3.y,i.p4.x,i.p4.y)&&(this._circle1=this._drawResizerOverlay(i.p1.x,i.p1.y,"nw-resize",this._circle1),this._circle2=this._drawResizerOverlay(i.p1.x+(i.p2.x-i.p1.x)/2,i.p1.y+(i.p2.y-i.p1.y)/2,"n-resize",this._circle2),this._circle3=this._drawResizerOverlay(i.p2.x,i.p2.y,"ne-resize",this._circle3),this._circle4=this._drawResizerOverlay(i.p1.x+(i.p4.x-i.p1.x)/2,i.p1.y+(i.p4.y-i.p1.y)/2,"w-resize",this._circle4),this._circle5=this._drawResizerOverlay(i.p4.x,i.p4.y,"sw-resize",this._circle5),this._circle6=this._drawResizerOverlay(i.p4.x+(i.p3.x-i.p4.x)/2,i.p4.y+(i.p3.y-i.p4.y)/2,"s-resize",this._circle6),this._circle8=this._drawResizerOverlay(i.p2.x+(i.p3.x-i.p2.x)/2,i.p2.y+(i.p3.y-i.p2.y)/2,"e-resize",this._circle8),this._circle7=this._drawResizerOverlay(i.p3.x,i.p3.y,"se-resize",this._circle7))}}_drawResizerOverlay(e,t,i,r){let n=this._drawCircle(e,t,this.designerCanvas.serviceContainer.options.resizerPixelSize/this.designerCanvas.zoomFactor,"svg-primary-resizer",r);return n.style.strokeWidth=(1/this.designerCanvas.zoomFactor).toString(),r||(n.addEventListener(x.PointerDown,o=>this._pointerActionTypeResize(n,o,i)),n.addEventListener(x.PointerMove,o=>this._pointerActionTypeResize(n,o,i)),n.addEventListener(x.PointerUp,o=>this._pointerActionTypeResize(n,o,i))),n.style.cursor=i,n}_pointerActionTypeResize(e,t,i){t.stopPropagation();let r=this.designerCanvas.getNormalizedEventCoordinates(t);switch(t.type){case x.PointerDown:let n=parseFloat(e.getAttribute("cx")),o=parseFloat(e.getAttribute("cy"));this._offsetPoint={x:n-r.x,y:o-r.y},t.target.setPointerCapture(t.pointerId),this._initialPoint=r,this._initialSizes=[],this._actionModeStarted=i,this._initialComputedTransformOrigins=[],this._initialTransformOrigins=[];let a=this.extendedItem.element.style.transform;this.extendedItem.element.style.transform="";let l=W(this.extendedItem.element);this.extendedItem.element.style.transform=a;let c={x:0,y:0};getComputedStyle(this.extendedItem.element).boxSizing=="content-box"&&(c=lh(this.extendedItem.element)),this._initialSizes.push({width:(l.width-c.x*this.designerCanvas.scaleFactor)/this.designerCanvas.scaleFactor,height:(l.height-c.y*this.designerCanvas.scaleFactor)/this.designerCanvas.scaleFactor});let h=getComputedStyle(this.extendedItem.element).transformOrigin.split(" ").map(f=>parseFloat(f.replace("px",""))),d=new DOMPoint(h[0],h[1]);if(this._initialComputedTransformOrigins.push(d),this._initialTransformOrigins.push(this.extendedItem.element.style.transformOrigin),this.resizeAllSelected)for(let f of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements)l=W(f.element),this._initialSizes.push({width:l.width/this.designerCanvas.scaleFactor,height:l.height/this.designerCanvas.scaleFactor});if(this.designerCanvas.alignOnSnap&&this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements),this.prepareResize(this.extendedItem,this._actionModeStarted),this.resizeAllSelected)for(let f of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements)f!==this.extendedItem&&this.prepareResize(f,this._actionModeStarted);break;case x.PointerMove:if(this._initialPoint){let f=getComputedStyle(this.extendedItem.parent.element),g=this.designerCanvas.serviceContainer.getLastServiceWhere("containerService",V=>V.serviceForContainer(this.extendedItem.parent,f)).placePoint(t,this.designerCanvas,this.extendedItem.parent,this._initialPoint,{x:0,y:0},r,this.designerCanvas.instanceServiceContainer.selectionService.selectedElements),_=Math.round(g.x-this._initialPoint.x-this._offsetPoint.x),b=Math.round(g.y-this._initialPoint.y-this._offsetPoint.y),C=pt(this.extendedItem.element),k=oa(new DOMPoint(_,b,0,0),C),P=k.x,D=k.y;t.shiftKey&&(P=P<D?P:D,D=P);let A=0,R=null,H=null;switch(this._actionModeStarted){case"e-resize":if(R=this._initialSizes[A].width+P,this.extendedItem.element.style.width=O(this.extendedItem,R)+"px",this.resizeAllSelected){A++;for(let V of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements)V!==this.extendedItem&&(V.element.style.width=O(this.extendedItem,this._initialSizes[A].width+P)+"px")}break;case"se-resize":if(R=this._initialSizes[A].width+P,this.extendedItem.element.style.width=O(this.extendedItem,R)+"px",H=this._initialSizes[A].height+D,this.extendedItem.element.style.height=O(this.extendedItem,H)+"px",this.resizeAllSelected){A++;for(let V of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements)V!==this.extendedItem&&(V.element.style.width=O(this.extendedItem,this._initialSizes[A].width+P)+"px",V.element.style.height=O(this.extendedItem,this._initialSizes[A].height+D)+"px")}break;case"s-resize":if(H=this._initialSizes[A].height+D,this.extendedItem.element.style.height=O(this.extendedItem,H)+"px",this.resizeAllSelected){A++;for(let V of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements)V!==this.extendedItem&&(V.element.style.height=O(this.extendedItem,this._initialSizes[A].height+D)+"px")}break;case"sw-resize":if(R=this._initialSizes[A].width-P,this.extendedItem.element.style.width=O(this.extendedItem,R)+"px",H=this._initialSizes[A].height+D,this.extendedItem.element.style.height=O(this.extendedItem,H)+"px",this.resizeAllSelected){A++;for(let V of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements)V!==this.extendedItem&&(V.element.style.width=O(this.extendedItem,this._initialSizes[A].width-P)+"px",V.element.style.height=O(this.extendedItem,this._initialSizes[A].height+D)+"px")}break;case"w-resize":if(R=this._initialSizes[A].width-P,this.extendedItem.element.style.width=O(this.extendedItem,R)+"px",this.resizeAllSelected){A++;for(let V of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements)V!==this.extendedItem&&(V.element.style.width=O(this.extendedItem,this._initialSizes[A].width-P)+"px")}break;case"nw-resize":if(R=this._initialSizes[A].width-P,this.extendedItem.element.style.width=O(this.extendedItem,R)+"px",H=this._initialSizes[A].height-D,this.extendedItem.element.style.height=O(this.extendedItem,H)+"px",this.resizeAllSelected){A++;for(let V of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements)V!==this.extendedItem&&(V.element.style.width=O(this.extendedItem,this._initialSizes[A].width-P)+"px",V.element.style.height=O(this.extendedItem,this._initialSizes[A].height-D)+"px")}break;case"n-resize":if(H=this._initialSizes[A].height-D,this.extendedItem.element.style.height=O(this.extendedItem,H)+"px",this.resizeAllSelected){A++;for(let V of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements)V!==this.extendedItem&&(V.element.style.height=O(this.extendedItem,this._initialSizes[A].height-D)+"px")}break;case"ne-resize":if(R=this._initialSizes[A].width+P,this.extendedItem.element.style.width=O(this.extendedItem,R)+"px",H=this._initialSizes[A].height-D,this.extendedItem.element.style.height=O(this.extendedItem,H)+"px",this.resizeAllSelected){A++;for(let V of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements)V!==this.extendedItem&&(V.element.style.width=O(this.extendedItem,this._initialSizes[A].width+P)+"px",V.element.style.height=O(this.extendedItem,this._initialSizes[A].height-D)+"px")}break}let ae=[this.extendedItem,this.extendedItem.parent];this.resizeAllSelected&&ae.push(...this.designerCanvas.instanceServiceContainer.selectionService.selectedElements),this.extensionManager.refreshExtensions(ae),this.designerCanvas?.raiseDesignItemsChanged(ae,"resize",!1)}break;case x.PointerUp:t.target.releasePointerCapture(t.pointerId);let p=this.extendedItem.openGroup(this.resizeAllSelected&&this.designerCanvas.instanceServiceContainer.selectionService.selectedElements.length>1?"Resize Elements":"Resize <"+this.extendedItem.name+">");try{this.extendedItem.setStyle("width",this.extendedItem.element.style.width),this.extendedItem.setStyle("height",this.extendedItem.element.style.height),this.extendedItem.setStyle("left",O(this.extendedItem,parseFloat(en(this.extendedItem.element,"left")))+"px"),this.extendedItem.setStyle("top",O(this.extendedItem,parseFloat(en(this.extendedItem.element,"top")))+"px");let f=new DOMPoint(this.extendedItem.element.offsetLeft+parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(" ")[0].replace("px","")),this.extendedItem.element.offsetTop+parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(" ")[1].replace("px","")));this.extendedItem.element.style.transformOrigin=this._initialTransformOrigins[0];let m=new DOMPoint(this.extendedItem.element.offsetLeft+parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(" ")[0].replace("px","")),this.extendedItem.element.offsetTop+parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(" ")[1].replace("px",""))),g=new DOMPoint(m.x-f.x,-(m.y-f.y)),_=new DOMMatrix(getComputedStyle(this.extendedItem.element).transform),b=0,C=0,k=oa(g,_),P=new DOMPoint(f.x+k.x,f.y-k.y),A=new DOMPoint(P.x-m.x,-(P.y-m.y)).matrixTransform(_),R=new DOMPoint(m.x+A.x,m.y-A.y);if(b=R.x-m.x,C=R.y-m.y,this.extendedItem.element.style.transform=_.translate(b,C).toString(),_.isIdentity&&(this.extendedItem.element.style.transform=""),this.extendedItem.setStyle("transform",this.extendedItem.element.style.transform),this.resizeAllSelected){for(let H of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements)H!==this.extendedItem&&(H.setStyle("width",H.element.style.width),H.setStyle("height",H.element.style.height),H.setStyle("left",O(this.extendedItem,parseFloat(en(H.element,"left")))+"px"),H.setStyle("top",O(this.extendedItem,parseFloat(en(H.element,"top")))+"px"));this.designerCanvas?.raiseDesignItemsChanged(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements,"resize",!0)}else this.designerCanvas?.raiseDesignItemsChanged([this.extendedItem],"resize",!0);p.commit()}catch(f){p.abort(),console.error(f)}this._initialSizes=null,this._initialPoint=null;break}}prepareResize(e,t){let i=null,r=null,n=null,o=null;switch(this._actionModeStarted){case"e-resize":n=getComputedStyle(e.element).left,e.element.style.removeProperty("right"),e.element.style.left=n;break;case"se-resize":i=getComputedStyle(e.element).top,e.element.style.removeProperty("bottom"),e.element.style.top=i,n=getComputedStyle(e.element).left,e.element.style.removeProperty("right"),e.element.style.left=n;break;case"s-resize":i=getComputedStyle(e.element).top,e.element.style.removeProperty("bottom"),e.element.style.top=i;break;case"sw-resize":i=getComputedStyle(e.element).top,e.element.style.removeProperty("bottom"),e.element.style.top=i,o=getComputedStyle(e.element).right,e.element.style.removeProperty("left"),e.element.style.right=o;break;case"w-resize":o=getComputedStyle(e.element).right,e.element.style.removeProperty("left"),e.element.style.right=o;break;case"nw-resize":r=getComputedStyle(e.element).bottom,e.element.style.removeProperty("top"),e.element.style.bottom=r,o=getComputedStyle(e.element).right,e.element.style.removeProperty("left"),e.element.style.right=o;break;case"n-resize":r=getComputedStyle(e.element).bottom,e.element.style.removeProperty("top"),e.element.style.bottom=r;break;case"ne-resize":r=getComputedStyle(e.element).bottom,e.element.style.removeProperty("top"),e.element.style.bottom=r,n=getComputedStyle(e.element).left,e.element.style.removeProperty("right"),e.element.style.left=n;break}}dispose(){this._removeAllOverlays()}}});import{css as yp}from"@node-projects/base-custom-webcomponent";var rn,Ta=u(()=>{"use strict";Da();$();rn=class{resizeAllSelected;constructor(e=!1){this.resizeAllSelected=e}shouldExtend(e,t,i){return i.element instanceof SVGElement||i.element instanceof HTMLTemplateElement?!1:!i.isRootItem&&i.nodeType==E.Element}getExtension(e,t,i){return new tn(e,t,i,this.resizeAllSelected)}static style=yp`
|
|
293
|
-
.svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events:
|
|
293
|
+
.svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: auto; }
|
|
294
294
|
`}});var nn,Ma=u(()=>{"use strict";Oe();_e();Pt();J();nn=class extends L{_rotateLine;_rotateCircle;_startPoint;_rotateCirclePosition;constructor(e,t,i){super(e,t,i)}extend(e,t){this.refresh(e,t)}refresh(e,t){let i=ka(this.extendedItem.element),r={x:i.width/2,y:-30/this.designerCanvas.zoomFactor},n={x:i.width/2,y:-22/this.designerCanvas.zoomFactor},o={x:i.width/2,y:-6/this.designerCanvas.zoomFactor};this._rotateCirclePosition=r;let a=this.designerCanvas.canvas.convertPointFromNode(r,this.extendedItem.element),l=this.designerCanvas.canvas.convertPointFromNode(n,this.extendedItem.element),c=this.designerCanvas.canvas.convertPointFromNode(o,this.extendedItem.element);this._rotateLine=this._drawLine(l.x,l.y,c.x,c.y,"svg-primary-rotate-line",this._rotateLine),this._rotateLine.style.strokeWidth=(1/this.designerCanvas.zoomFactor).toString(),this._rotateCircle?(this._rotateCircle=this._drawCircle(a.x,a.y,5/this.designerCanvas.zoomFactor,"svg-primary-rotate",this._rotateCircle),this._rotateCircle.style.strokeWidth=(1/this.designerCanvas.zoomFactor).toString()):(this._rotateCircle=this._drawCircle(a.x,a.y,5/this.designerCanvas.zoomFactor,"svg-primary-rotate",this._rotateCircle),this._rotateCircle.style.strokeWidth=(1/this.designerCanvas.zoomFactor).toString(),this._rotateCircle.addEventListener("pointerdown",h=>{h.stopPropagation(),h.target.setPointerCapture(h.pointerId);let d=this.designerCanvas.getNormalizedEventCoordinates(h);this._startPoint=this.extendedItem.element.convertPointFromNode({x:d.x,y:d.y},this.designerCanvas.canvas)}),this._rotateCircle.addEventListener("pointermove",h=>{h.stopPropagation(),this._startPoint&&(this.extendedItem.element.style.rotate="none",this.extendedItem.element.style.rotate=this.getAngle(h)+"deg")}),this._rotateCircle.addEventListener("pointerup",h=>{h.stopPropagation(),h.target.releasePointerCapture(h.pointerId),this._startPoint=null,this.extendedItem.element.style.rotate="none",this.extendedItem.setStyle("rotate",this.getAngle(h)+"deg")}))}getAngle(e){let t=this.designerCanvas.getNormalizedEventCoordinates(e),i={x:t.x,y:t.y},r=this.extendedItem.element.convertPointFromNode(i,this.designerCanvas.canvas),o=getComputedStyle(this.extendedItem.element).transformOrigin.split(" "),a={x:parseFloat(o[0]),y:parseFloat(o[1])},l=Math.atan2(this._rotateCirclePosition.y-a.y,this._rotateCirclePosition.x-a.x)*180/Math.PI+90,c=Math.atan2(r.y-a.y,r.x-a.x)*180/Math.PI+90-l;return j(e)||(c=Math.round(c/15)*15),O(this.extendedItem,c)}dispose(){this._removeAllOverlays()}}});import{css as vp}from"@node-projects/base-custom-webcomponent";var sn,Na=u(()=>{"use strict";Ma();sn=class{type;constructor(e="center-top"){this.type=e}shouldExtend(e,t,i){return i.element instanceof SVGElement||i.element instanceof HTMLTemplateElement?!1:!i.isRootItem}getExtension(e,t,i){return new nn(e,t,i)}static style=vp`
|
|
295
|
-
.svg-primary-rotate { stroke: #3899ec; fill: white; stroke-width: 1; pointer-events:
|
|
296
|
-
.svg-primary-rotate-transparent { fill: transparent; pointer-events:
|
|
295
|
+
.svg-primary-rotate { stroke: #3899ec; fill: white; stroke-width: 1; pointer-events: auto; cursor: alias; }
|
|
296
|
+
.svg-primary-rotate-transparent { fill: transparent; pointer-events: auto; cursor: alias; }
|
|
297
297
|
.svg-primary-rotate-line { stroke: #3899ec; fill: #3899ec; stroke-width: 1; }
|
|
298
298
|
`}});var on,Oa=u(()=>{"use strict";ee();Z();on=class{cursor="zoom-in";_rect;_startPoint;_endPoint;_pointerMovementTolerance=5;_zoomStepSize=.2;activated(e){}pointerEventHandler(e,t,i){let r=e.getNormalizedEventCoordinates(t);switch(t.type){case x.PointerDown:t.target.setPointerCapture(t.pointerId),e.captureActiveTool(this),this._startPoint=r,this._rect||(this._rect=document.createElementNS("http://www.w3.org/2000/svg","rect")),this._rect.setAttribute("class","svg-selector"),this._rect.setAttribute("x",this._startPoint.x*e.zoomFactor),this._rect.setAttribute("y",this._startPoint.y*e.zoomFactor),this._rect.setAttribute("width",0),this._rect.setAttribute("height",0),this._rect.style.strokeWidth=""+1/e.scaleFactor,this._rect.style.strokeDasharray=""+2/e.scaleFactor,e.overlayLayer.addOverlay(this.constructor.name,this._rect,I.Foreground);break;case x.PointerMove:if(this._startPoint){let o=r.x-this._startPoint.x,a=r.y-this._startPoint.y;o>=0?(this._rect.setAttribute("x",this._startPoint.x),this._rect.setAttribute("width",o)):(this._rect.setAttribute("x",r.x),this._rect.setAttribute("width",-1*o)),a>=0?(this._rect.setAttribute("y",this._startPoint.y),this._rect.setAttribute("height",a)):(this._rect.setAttribute("y",r.y),this._rect.setAttribute("height",-1*a))}break;case x.PointerUp:t.target.releasePointerCapture(t.pointerId),e.releaseActiveTool(),this._endPoint=r;let n=t.button==0;switch(t.button){case 0:case 2:this._zoomOnto(n,this._startPoint,this._endPoint,e);break}e.overlayLayer.removeOverlay(this._rect),this._rect=null,this._startPoint=null;break}}_zoomOnto(e,t,i,r){if(this._isPositionEqual(t,i)){let n=r.zoomFactor,o=e?n+this._zoomStepSize:n-this._zoomStepSize;r.zoomTowardsPoint(i,o)}else r.zoomOntoRectangle(t,i)}_isPositionEqual(e,t){let i=this._pointerMovementTolerance;return Math.abs(e.x-t.x)<=i&&Math.abs(e.y-t.y)<=i}keyboardEventHandler(e,t,i){}dispose(){}}});var an,La=u(()=>{"use strict";ee();an=class{cursor="grab";pointerEventHandler(e,t,i){switch(t.type){case x.PointerDown:t.target.setPointerCapture(t.pointerId),e.captureActiveTool(this);break;case x.PointerMove:(t.buttons==1||t.buttons==4)&&(e.canvasOffset={x:e.canvasOffset.x+t.movementX/e.zoomFactor,y:e.canvasOffset.y+t.movementY/e.zoomFactor});break;case x.PointerUp:t.target.releasePointerCapture(t.pointerId),e.releaseActiveTool();break}}keyboardEventHandler(e,t,i){}activated(e){}dispose(){}}});var S,Qe=u(()=>{"use strict";(function(s){s.copy="copy",s.paste="paste",s.cut="cut",s.delete="delete",s.undo="undo",s.redo="redo",s.holdUndo="holdUndo",s.holdRedo="holdRedo",s.rotateCounterClockwise="rotateCounterClockwise",s.rotateClockwise="rotateClockwise",s.mirrorHorizontal="mirrorHorizontal",s.mirrorVertical="mirrorVertical",s.selectAll="selectAll",s.moveToFront="moveToFront",s.moveForward="moveForward",s.moveBackward="moveBackward",s.moveToBack="moveToBack",s.arrangeLeft="arrangeLeft",s.arrangeCenter="arrangeCenter",s.arrangeRight="arrangeRight",s.arrangeTop="arrangeTop",s.arrangeMiddle="arrangeMiddle",s.arrangeBottom="arrangeBottom",s.unifyWidth="unifyWidth",s.unifyHeight="unifyHeight",s.distributeHorizontal="distributeHorizontaly",s.distributeVertical="distributeVertical",s.setTool="setTool",s.setStrokeColor="setStrokeColor",s.setFillBrush="setFillBrush",s.setStrokeThickness="setStrokeThickness",s.screenshot="screenshot"})(S||(S={}))});var ln,Ra=u(()=>{"use strict";Qe();q();ln=class{shouldProvideContextmenu(e,t,i,r){return!0}provideContextMenuItems(e,t,i){return[{title:"copy",icon:`<img src="${v+"icons/copy.svg"}">`,action:()=>{t.executeCommand({type:S.copy})},shortCut:"Ctrl + C",disabled:i===null},{title:"cut",icon:`<img src="${v+"icons/cut.svg"}">`,action:()=>{t.executeCommand({type:S.cut})},shortCut:"Ctrl + X",disabled:i===null},{title:"paste",icon:`<img src="${v+"icons/paste.svg"}">`,action:()=>{t.executeCommand({type:S.paste})},shortCut:"Ctrl + V"},{title:"delete",icon:`<img src="${v+"icons/delete.svg"}">`,action:()=>{t.executeCommand({type:S.delete})},shortCut:"Del",disabled:i===null}]}}});var cn,Fa=u(()=>{"use strict";Qe();$();q();cn=class{shouldProvideContextmenu(e,t,i,r){return!i?.isRootItem&&i?.nodeType==E.Element}provideContextMenuItems(e,t,i){return[{title:"to front",icon:`<img style="rotate: 90deg" src="${v+"icons/moveFirst.svg"}">`,action:()=>{t.executeCommand({type:S.moveToFront})}},{title:"move forward",icon:`<img style="rotate: 90deg" src="${v+"icons/moveLeft.svg"}">`,action:()=>{t.executeCommand({type:S.moveForward})}},{title:"move backward",icon:`<img style="rotate: 270deg" src="${v+"icons/moveLeft.svg"}">`,action:()=>{t.executeCommand({type:S.moveBackward})}},{title:"to back",icon:`<img style="rotate: 270deg" src="${v+"icons/moveFirst.svg"}">`,action:()=>{t.executeCommand({type:S.moveToBack})}}]}}});function Ah(s,e,t=!1,i=0){for(let p of s)if(p==e||p.element.contains(e.element)){console.warn("could not move items into of itself or a child");return}let r=s[0],n=r.openGroup("switchContainerHelper"),o=r.instanceServiceContainer.designerCanvas,a=Number.MAX_VALUE,l=Number.MAX_VALUE,c=0,h=0;for(let p of s){let f=o.getNormalizedElementCoordinates(p.element);f.x<a&&(a=f.x),f.y<l&&(l=f.y),f.x+f.width>c&&(c=f.x+f.width),f.y+f.height>h&&(h=f.y+f.height)}let d=o.getNormalizedElementCoordinates(e.element);for(let p of s){let f=o.getNormalizedElementCoordinates(p.element);p.remove(),t?(p.setStyle("left",(f.x-a+i).toString()+"px"),p.setStyle("top",(f.y-l+i).toString()+"px")):(p.setStyle("left",(f.x-d.x).toString()+"px"),p.setStyle("top",(f.y-d.y).toString()+"px")),e.insertChild(p)}t&&(e.setStyle("position","absolute"),e.setStyle("left",(a-i).toString()+"px"),e.setStyle("top",(l-i).toString()+"px"),e.setStyle("width",(c-a+2*i).toString()+"px"),e.setStyle("height",(h-l+2*i).toString()+"px")),n.commit()}var za=u(()=>{"use strict"});var hn,Va=u(()=>{"use strict";za();Q();hn=class{orderIndex=60;shouldProvideContextmenu(e,t,i,r){return i?.instanceServiceContainer.selectionService.selectedElements.length>1}provideContextMenuItems(e,t,i){return[{title:"wrap in",children:[{title:"div",action:()=>{let r=i.openGroup("wrap in Div"),n=i.instanceServiceContainer.selectionService.selectedElements,o=document.createElement("div"),a=T.createDesignItemFromInstance(o,i.serviceContainer,i.instanceServiceContainer);n[0].insertAdjacentElement(a,"beforebegin"),Ah(n,a,!0,10),r.commit(),i.instanceServiceContainer.selectionService.setSelectedElements([a])}}]}]}}});var Pi,Ba=u(()=>{"use strict";ee();Oe();Q();Z();Pi=class{cursor="progress";_rect;_initialPoint;activated(e){}pointerEventHandler(e,t,i){j(t)||t.shiftKey?this.cursor="copy":t.altKey?this.cursor="default":this.cursor="default";let r=e.getNormalizedEventCoordinates(t);switch(t.type){case x.PointerDown:t.target.setPointerCapture(t.pointerId),e.captureActiveTool(this),this._initialPoint=r,this._rect||(this._rect=document.createElementNS("http://www.w3.org/2000/svg","rect")),this._rect.setAttribute("class","svg-selector"),this._rect.setAttribute("x",this._initialPoint.x*e.scaleFactor),this._rect.setAttribute("y",this._initialPoint.y*e.scaleFactor),this._rect.setAttribute("width",0),this._rect.setAttribute("height",0),this._rect.style.strokeWidth=""+1/e.scaleFactor,this._rect.style.strokeDasharray=""+2/e.scaleFactor,e.overlayLayer.addOverlay(this.constructor.name,this._rect,I.Foreground);break;case x.PointerMove:if(this._initialPoint){let l=r.x-this._initialPoint.x,c=r.y-this._initialPoint.y;l>=0?(this._rect.setAttribute("x",this._initialPoint.x),this._rect.setAttribute("width",l)):(this._rect.setAttribute("x",r.x),this._rect.setAttribute("width",-1*l)),c>=0?(this._rect.setAttribute("y",this._initialPoint.y),this._rect.setAttribute("height",c)):(this._rect.setAttribute("y",r.y),this._rect.setAttribute("height",-1*c))}break;case x.PointerUp:t.target.releasePointerCapture(t.pointerId),e.releaseActiveTool();let n=e.rootDesignItem.querySelectorAll("*"),o=[];(j(t)||t.shiftKey||t.altKey)&&e.instanceServiceContainer.selectionService.selectedElements&&o.push(...e.instanceServiceContainer.selectionService.selectedElements);let a=e.overlayLayer.createPoint();for(let l of n){let c=e.getNormalizedElementCoordinates(l);a.x=c.x,a.y=c.y;let h=this._rect.isPointInFill(a);a.x=c.x+c.width,a.y=c.y;let d=h&&this._rect.isPointInFill(a);a.x=c.x,a.y=c.y+c.height;let p=d&&this._rect.isPointInFill(a);if(a.x=c.x+c.width,a.y=c.y+c.height,p&&this._rect.isPointInFill(a)){let m=T.GetOrCreateDesignItem(l,l,e.serviceContainer,e.instanceServiceContainer);if(!o.includes(m)&&!t.altKey)o.push(m);else if(t.altKey){let g=o.indexOf(m);o.splice(g,1)}}}e.overlayLayer.removeOverlay(this._rect),this._rect=null,this._initialPoint=null,e.instanceServiceContainer.selectionService.setSelectedElements(o,t),e.serviceContainer.globalContext.finishedWithTool(this);break}}keyboardEventHandler(e,t,i){}dispose(){}}});var dn,Ha=u(()=>{"use strict";ee();Oe();Q();Z();dn=class{cursor="progress";_pathD;_path;pointerEventHandler(e,t,i){j(t)?this.cursor="copy":t.altKey?this.cursor="default":this.cursor="default";let r=e.getNormalizedEventCoordinates(t);switch(t.type){case x.PointerDown:t.target.setPointerCapture(t.pointerId),e.captureActiveTool(this),this._path=document.createElementNS("http://www.w3.org/2000/svg","path"),this._path.setAttribute("class","svg-selector"),this._path.style.strokeWidth=""+1/e.scaleFactor,this._path.style.strokeDasharray=""+2/e.scaleFactor,this._pathD="M"+r.x+" "+r.y,this._path.setAttribute("D",this._pathD),e.overlayLayer.addOverlay(this.constructor.name,this._path,I.Foreground);break;case x.PointerMove:this._path&&(this._pathD+="L"+r.x+" "+r.y,this._path.setAttribute("d",this._pathD+"Z"));break;case x.PointerUp:t.target.releasePointerCapture(t.pointerId),e.releaseActiveTool();let n=e.rootDesignItem.querySelectorAll("*"),o=[];(j(t)||t.altKey)&&e.instanceServiceContainer.selectionService.selectedElements&&o.push(...e.instanceServiceContainer.selectionService.selectedElements);let a=e.overlayLayer.createPoint();for(let l of n){let c=e.getNormalizedElementCoordinates(l);a.x=c.x,a.y=c.y;let h=this._path.isPointInFill(a)||this._path.isPointInStroke(a);a.x=c.x+c.width,a.y=c.y;let d=this._path.isPointInFill(a)||this._path.isPointInStroke(a);a.x=c.x,a.y=c.y+c.height;let p=this._path.isPointInFill(a)||this._path.isPointInStroke(a);a.x=c.x+c.width,a.y=c.y+c.height;let f=this._path.isPointInFill(a)||this._path.isPointInStroke(a);if(h&&d&&p&&f){let m=T.GetOrCreateDesignItem(l,l,e.serviceContainer,e.instanceServiceContainer);if(!o.includes(m)&&!t.altKey)o.push(m);else if(t.altKey){let g=o.indexOf(m);o.splice(g,1)}}}e.overlayLayer.removeOverlay(this._path),this._path=null,this._pathD=null,e.instanceServiceContainer.selectionService.setSelectedElements(o),e.serviceContainer.globalContext.finishedWithTool(this);break}}keyboardEventHandler(e,t,i){}activated(e){}dispose(){}}});var pn,Ga=u(()=>{"use strict";pn=class{cursor="crosshair";async activated(e){try{let r=(await new EyeDropper().open()).sRGBHex;e.globalContext.strokeColor=r}finally{e.globalContext.finishedWithTool(this)}}async pointerEventHandler(e,t,i){}keyboardEventHandler(e,t,i){}dispose(){}}});function Ih(s){let e=document.getSelection();return e.getComposedRanges?e=e.getComposedRanges(s):s.getSelection&&(e=s.getSelection()),e}function Ph(s,e){function t(n){let o=document.createElement("span");e.push(o),n.parentNode.insertBefore(o,n),o.appendChild(n)}function i(n){switch(n.nodeType){case Node.TEXT_NODE:t(n);break;case Node.DOCUMENT_FRAGMENT_NODE:case Node.ELEMENT_NODE:Array.from(n.childNodes).forEach(i);break}}let r=s.extractContents();i(r),s.insertNode(r)}function xp(s){let e=document.createRange();return e.setStart(s.startContainer,s.startOffset),e.setEnd(s.endContainer,s.endOffset),e}function kh(s){let e=[];if(s[0]instanceof StaticRange)Ph(xp(s[0]),e);else{if(!s.rangeCount)return e;let t=s.getRangeAt(0);Ph(t,e)}return s.removeAllRanges&&s.removeAllRanges(),e}var Wa=u(()=>{"use strict"});import{html as bp}from"@node-projects/base-custom-webcomponent";var Zt,mn=u(()=>{"use strict";J();Z();Wa();ra();te();Zt=class s extends L{static template=bp`
|
|
299
299
|
<div style="height: 100%; display: flex; gap: 2px; width: 100%;">
|
|
300
|
-
<button data-command="font-weight" data-command-parameter="800" style="pointer-events:
|
|
301
|
-
<button data-command="font-style" data-command-parameter="italic" style="pointer-events:
|
|
302
|
-
<button data-command="text-decoration" data-command-parameter="underline" style="pointer-events:
|
|
303
|
-
<button data-command="text-decoration" data-command-parameter="line-through" style="pointer-events:
|
|
304
|
-
<button data-command="text-decoration" data-command-parameter="overline" style="pointer-events:
|
|
305
|
-
<select data-command="fontSize" style="pointer-events:
|
|
300
|
+
<button data-command="font-weight" data-command-parameter="800" style="pointer-events: auto; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
|
|
301
|
+
<button data-command="font-style" data-command-parameter="italic" style="pointer-events: auto; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
|
|
302
|
+
<button data-command="text-decoration" data-command-parameter="underline" style="pointer-events: auto; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
|
|
303
|
+
<button data-command="text-decoration" data-command-parameter="line-through" style="pointer-events: auto; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
|
|
304
|
+
<button data-command="text-decoration" data-command-parameter="overline" style="pointer-events: auto; height: 24px; width: 24px; padding: 0;"><span style="text-decoration: overline">o</span></button>
|
|
305
|
+
<select data-command="fontSize" style="pointer-events: auto; height: 24px; width: 60px; padding: 0;">
|
|
306
306
|
<option>8px</option>
|
|
307
307
|
<option>9px</option>
|
|
308
308
|
<option>10px</option>
|
|
@@ -317,7 +317,7 @@ var wd=Object.defineProperty;var u=(s,e)=>()=>(s&&(e=s(s=0)),e);var Sd=(s,e)=>{f
|
|
|
317
317
|
<option>32px</option>
|
|
318
318
|
<option>36px</option>
|
|
319
319
|
</select>
|
|
320
|
-
<select id="fontFamily" data-command="font-family" style="pointer-events:
|
|
320
|
+
<select id="fontFamily" data-command="font-family" style="pointer-events: auto; height: 24px; width: 90px; padding: 0;">
|
|
321
321
|
|
|
322
322
|
</select>
|
|
323
323
|
</div>
|
|
@@ -562,9 +562,9 @@ span {
|
|
|
562
562
|
`}});var cs,Gl=u(()=>{"use strict";J();Z();cs=class extends L{_path;constructor(e,t,i){super(e,t,i)}extend(){let e=this.extendedItem.element.getBoxQuads({relativeTo:this.designerCanvas.canvas})[0];this._path=this._drawTransformedRect(e,"svg-flexbox",this._path,I.Background)}refresh(){this._removeAllOverlays(),this.extend()}dispose(){this._removeAllOverlays()}}});import{css as jp}from"@node-projects/base-custom-webcomponent";var Wl,zi,hs=u(()=>{"use strict";Gl();Wl="flexboxExtensionShowOverlay",zi=class{shouldExtend(e,t,i){let r=getComputedStyle(i.element).display;return r=="flex"||r=="inline-flex"?t.instanceServiceContainer.designContext.extensionOptions[Wl]!==!1:!1}getExtension(e,t,i){return new cs(e,t,i)}style=jp`
|
|
563
563
|
.svg-flexbox { stroke: orange; fill: #9a47ff22; }
|
|
564
564
|
`}});var ds,jl=u(()=>{"use strict";hs();_t();ds=class extends Ae{constructor(){super(Wl,"F","show flexbox overlay")}}});var ps,Ul=u(()=>{"use strict";_n();_t();ps=class extends Ae{constructor(){super($a,"I","show invisible div overlay")}}});var ms,Kl=u(()=>{"use strict";ms=class{redoBranches;title;get affectedItems(){let e=new Set;for(let t of this.undoStack)for(let i of t.affectedItems)e.add(i);for(let t of this.redoStack)for(let i of t.affectedItems)e.add(i);return[...e.values()]}commitHandler;abortHandler;constructor(e,t,i){this.title=e,this.commitHandler=t,this.abortHandler=i}do(){let e=null;for(;e=this.redoStack.pop();)try{e.do(),this.undoStack.push(e)}catch(t){throw t}}undo(){let e=null;for(;e=this.undoStack.pop();)try{e.undo(),this.redoStack.push(e)}catch(t){throw t}}commit(){this.commitHandler(this)}abort(){this.abortHandler(this)}mergeWith(e){return!1}addCommitedSubchangeGroup(e){this.undoStack.push(e)}undoStack=[];redoStack=[];execute(e){e.do();for(let t of this.undoStack)if(t.mergeWith(e))return;this.undoStack.push(e)}}});var us,Yl=u(()=>{"use strict";Kl();us=class{_undoStack=[];_redoStack=[];_transactionStack=[];_designerCanvas;_storeRedoBranches;constructor(e,t=!1){this._designerCanvas=e,this._storeRedoBranches=t}openGroup(e){let t=new ms(e,i=>this.commitTransactionItem(i),i=>this.abortTransactionItem(i));return this._transactionStack.push(t),t}commitTransactionItem(e){let t=this._transactionStack.pop();if(t!==e)throw this.clear(),"UndoService - Commited Transaction was not the last";t.undoStack.length&&(this._transactionStack.length>0?this._transactionStack[this._transactionStack.length-1].addCommitedSubchangeGroup(t):(this._storeRedoBranches&&this._redoStack.length&&(t.redoBranches==null&&(t.redoBranches=[]),t.redoBranches.push(this._redoStack)),this._redoStack=[],this._undoStack.push(t))),this._transactionStack.length==0&&(this._designerCanvas.extensionManager.refreshAllExtensions(e.affectedItems),this._designerCanvas.onContentChanged.emit())}abortTransactionItem(e){if(this._transactionStack.length>0){let t=this._transactionStack.pop();if(t!==e)throw this.clear(),"UndoService - Aborted Transaction was not the last";t.undo()}}execute(e){this._transactionStack.length==0?(e.do(),this._storeRedoBranches&&this._redoStack.length&&(e.redoBranches==null&&(e.redoBranches=[]),e.redoBranches.push(this._redoStack)),this._redoStack=[],this._undoStack.push(e)):this._transactionStack[this._transactionStack.length-1].execute(e),this._transactionStack.length==0&&(this._designerCanvas.extensionManager.refreshAllExtensions(e.affectedItems),this._designerCanvas.onContentChanged.emit())}clear(){this._undoStack=[],this._redoStack=[],this._transactionStack=[]}clearTransactionstackIfNotEmpty(){this._transactionStack.length&&(console.error("transactionStack was not empty, but should be",this._transactionStack),this._transactionStack=[])}undo(){if(!this.canUndo())return;if(this._transactionStack.length!=0)throw"Cannot Undo while transaction is running";let e=this._undoStack.pop();try{e.undo(),this._redoStack.push(e)}catch(t){throw this.clear(),t}this._designerCanvas.extensionManager.refreshAllExtensions(e.affectedItems),this._designerCanvas.onContentChanged.emit()}redo(){if(!this.canRedo())return;if(this._transactionStack.length!=0)throw"Cannot Redo while transaction is running";let e=this._redoStack.pop();try{e.do(),this._undoStack.push(e)}catch(t){throw this.clear(),t}this._designerCanvas.extensionManager.refreshAllExtensions(e.affectedItems),this._designerCanvas.onContentChanged.emit()}redoTo(e){this._redoStack=e.toReversed();for(let t=0;t<e.length;t++)this.redo()}canUndo(){return this._undoStack.length>0}canRedo(){return this._redoStack.length>0}get undoCount(){return this._undoStack.length}get redoCount(){return this._redoStack.length}*getUndoEntryNames(e=999){for(let t=Math.min(this._undoStack.length,e)-1;t>=0;t--)yield this._undoStack[t].title}*getUndoEntries(e=999){for(let t=Math.min(this._undoStack.length,e)-1;t>=0;t--)yield this._undoStack[t]}*getRedoEntryNames(e=999){for(let t=Math.min(this._redoStack.length,e)-1;t>=0;t--)yield this._redoStack[t].title}*getRedoEntries(e=999){for(let t=Math.min(this._redoStack.length,e)-1;t>=0;t--)yield this._redoStack[t]}}});var fs,Nh=u(()=>{"use strict";fs=class{constructor(e,t,i){this.title="Change Selection",this.oldSelection=e,this.newSelection=t,this.selectionService=i}title;get affectedItems(){return this.oldSelection&&this.newSelection?[...this.oldSelection,...this.newSelection]:this.oldSelection?[...this.oldSelection]:[...this.newSelection]}undo(){this.selectionService._withoutUndoSetSelectedElements(this.oldSelection)}do(){this.selectionService._withoutUndoSetSelectedElements(this.newSelection)}oldSelection;newSelection;selectionService;mergeWith(e){return!1}}});import{TypedEvent as Oh}from"@node-projects/base-custom-webcomponent";function Lh(s,e){let t=null;if(s.hasChildren)for(let i of s.children()){let r=s.instanceServiceContainer.designItemDocumentPositionService.getPosition(i);r&&r.start<=e&&r.start+r.length>=e&&(t=i)}return t?Lh(t,e):s}var gs,Xl=u(()=>{"use strict";Nh();gs=class{primarySelection;selectedElements=[];_designerCanvas;_undoSelectionChanges;constructor(e,t){this._designerCanvas=e,this._undoSelectionChanges=t}setSelectedElements(e,t){if((e===null||e.length===0)&&(e=[this._designerCanvas.rootDesignItem]),this.selectedElements!=e&&!(this.selectedElements.length===0&&(e==null||e.length===0))){if(this.selectedElements?.length===1&&e?.length===1&&e[0]===this.selectedElements[0]){this.onSelectionRefresh.emit({selectedElements:this.selectedElements,event:t});return}if(this._undoSelectionChanges){let i=new fs(this.selectedElements,e,this);this._designerCanvas.instanceServiceContainer.undoService.execute(i)}else this._withoutUndoSetSelectedElements(e,t)}}setSelectionByTextRange(e,t){let i=Lh(this._designerCanvas.rootDesignItem,e);i&&(this.selectedElements.length!=1||this.primarySelection!=i)&&this.setSelectedElements([i])}_withoutUndoSetSelectedElements(e,t){let i=this.selectedElements;if(!e)this.selectedElements=[],this.primarySelection=null;else{let r=[];for(let n of e)n&&(e.length==1||n!==n.instanceServiceContainer.contentService.rootDesignItem)&&r.push(n);this.selectedElements=r,r&&r.length>0?this.primarySelection=r[0]:this.primarySelection=null}this.onSelectionChanged.emit({selectedElements:this.selectedElements,oldSelectedElements:i,event:t})}clearSelectedElements(){this.setSelectedElements([])}isSelected(e){return this.selectedElements.indexOf(e)>=0}onSelectionChanged=new Oh;onSelectionRefresh=new Oh}});import{TypedEvent as Up}from"@node-projects/base-custom-webcomponent";var ys,Zl=u(()=>{"use strict";ys=class{constructor(e){this.rootDesignItem=e}rootDesignItem;onContentChanged=new Up}});var vs,$l=u(()=>{"use strict";q();vs=class{shouldProvideContextmenu(e,t,i,r){return i!==null}provideContextMenuItems(e,t,i){return[{title:"jump to",icon:`<img src="${v+"icons/jump.svg"}">`,action:()=>{let r=t.getNormalizedElementCoordinates(i.element);t.zoomPoint({x:r.x+r.width/2,y:r.y+r.height/2},t.zoomFactor)}}]}}});var xs,ql=u(()=>{"use strict";ee();ua();te();qt();Pt();J();Z();xs=class extends L{gridInformation;_resizers=[];_initalPos;_initialSizes;_group;_hasChanged;constructor(e,t,i){super(e,t,i)}extend(e,t){this._group=this._drawGroup(null,this._group,I.Background),this._group.style.transform=pt(this.extendedItem.element).toString(),this._group.style.transformOrigin="0 0",this._group.style.transformBox="fill-box",this.refresh(t)}refresh(e,t){this.gridInformation=Ge(this.extendedItem),this.gridInformation.gaps.forEach((i,r)=>{i.width<3&&(i.width=3,i.x--),i.height<3&&(i.height=3,i.y--);let n=this._drawRect(i.x,i.y,i.width,i.height,"svg-grid-resizer-"+i.type,this._resizers[r],I.Normal);this._resizers[r]||(this._resizers[r]=n,n.addEventListener(x.PointerDown,o=>this._pointerActionTypeResize(o,n,i)),n.addEventListener(x.PointerMove,o=>this._pointerActionTypeResize(o,n,i)),n.addEventListener(x.PointerUp,o=>this._pointerActionTypeResize(o,n,i)),this._group.appendChild(n))})}_pointerActionTypeResize(e,t,i){e.stopPropagation();let r=i.type=="h"?"gridTemplateRows":"gridTemplateColumns",n=i.type=="h"?"Y":"X",o=(i.type=="h"?i.row:i.column)-1,a=i.type=="h"?"height":"width",l=e["client"+n];switch(e.type){case x.PointerDown:t.setPointerCapture(e.pointerId),this._initalPos=l,this._initialSizes=getComputedStyle(this.extendedItem.element)[r];break;case x.PointerMove:if(this._initialSizes){let h=this._initalPos-l;if(Math.abs(h)>5||this._hasChanged){this._hasChanged=!0;let d=this._initialSizes.split(" ");d[o]=parseFloat(d[o])-h+"px",d[o+1]=parseFloat(d[o+1])+h+"px",this.extendedItem.element.style[r]=d.join(" "),this.extensionManager.refreshExtensions([this.extendedItem],null,e)}}break;case x.PointerUp:t.releasePointerCapture(e.pointerId);let c=this._initalPos-l;if(this._hasChanged){this._hasChanged=!1;let h=this.extendedItem.getStyleFromSheetOrLocalOrComputed(r),d=this._initialSizes.split(" "),p=wh(h);p.length!=d.length&&(p=d.map(g=>Et(g))),this.extendedItem.element.style[r]="";let f=d.map(g=>parseFloat(g));f[o]-=c,f[o+1]+=c;let m=this._convertCssUnits(f,p,this.extendedItem.element,a);this.extendedItem.updateStyleInSheetOrLocal(r,m.join(" "),null,!0)}this._initalPos=null,this._initialSizes=null,this.extensionManager.refreshExtensions([this.extendedItem]);break}}_convertCssUnits(e,t,i,r){let n=getComputedStyle(i),a=W(i)[r],l=r=="height"?this.gridInformation.cells.length-1:this.gridInformation.cells[0].length-1,c=r=="width"?n.columnGap:n.rowGap;c=="normal"&&(c="0px");let h=ma(c,i,r)??0,p=a-h*l;for(let m=0;m<e.length;m++)t[m]!="fr"&&(p-=e[m]);let f=[];for(let m=0;m<e.length;m++)t[m]!="fr"?f.push(Ut(e[m],i,r,t[m])):f.push((e[m]/p*10).toFixed(2)+"fr");return f}dispose(){this._removeAllOverlays()}}});import{css as Kp}from"@node-projects/base-custom-webcomponent";var Vi,Ql=u(()=>{"use strict";ql();Di();Vi=class{shouldExtend(e,t,i){let r=getComputedStyle(i.element).display;return r=="grid"||r=="inline-grid"?t.instanceServiceContainer.designContext.extensionOptions[ki]!==!1:!1}getExtension(e,t,i){return new xs(e,t,i)}static style=Kp`
|
|
565
|
-
.svg-grid-resizer-v { fill: transparent; cursor: ew-resize; pointer-events:
|
|
565
|
+
.svg-grid-resizer-v { fill: transparent; cursor: ew-resize; pointer-events: auto; }
|
|
566
566
|
.svg-grid-resizer-v:hover { fill: #ff7f5052; }
|
|
567
|
-
.svg-grid-resizer-h { fill: transparent; cursor: ns-resize; pointer-events:
|
|
567
|
+
.svg-grid-resizer-h { fill: transparent; cursor: ns-resize; pointer-events: auto; }
|
|
568
568
|
.svg-grid-resizer-h:hover { fill: #ff7f5052; }
|
|
569
569
|
`}});var ii,Jl=u(()=>{"use strict";ii=class{extensions;extIndex;style;svgDefs;constructor(...e){this.extensions=e;for(let t of e)t.style&&(this.style||(this.style=[]),Array.isArray(t.style)?this.style.push(...t.style):this.style.push(t.style)),t.constructor.style&&(this.style||(this.style=[]),Array.isArray(t.constructor.style)?this.style.push(...t.constructor.style):this.style.push(t.constructor.style)),t.svgDefs&&(this.svgDefs||(this.svgDefs=[]),Array.isArray(t.svgDefs)?this.svgDefs.push(...t.svgDefs):this.svgDefs.push(t.svgDefs)),t.constructor.svgDefs&&(this.svgDefs||(this.svgDefs=[]),Array.isArray(t.constructor.svgDefs)?this.svgDefs.push(...t.svgDefs):this.svgDefs.push(t.constructor.svgDefs))}shouldExtend(e,t,i){for(this.extIndex=0;this.extIndex<this.extensions.length;this.extIndex++)if(this.extensions[this.extIndex].shouldExtend(e,t,i))return!0;return!1}getExtension(e,t,i){return this.extensions[this.extIndex].getExtension(e,t,i)}}});var bs,ec=u(()=>{"use strict";bs=class{_designItemsAssignmentList=new WeakMap;constructor(e){}setPosition(e,t){this._designItemsAssignmentList.set(e,t)}getPosition(e){return this._designItemsAssignmentList.get(e)}}});import{html as Yp,BaseCustomWebComponentConstructorAppend as Xp,css as Zp}from"@node-projects/base-custom-webcomponent";var Bi,tc=u(()=>{"use strict";_e();te();Bi=class extends Xp{_designerView;_previousSelectionRect;_selectionChanged;_relativeButton;_absoluteButton;_applyButton;_inputX;_inputY;_inputR;_inputSpacingX;_inputSpacingY;_originTopLeft;_originTopMid;_originTopRight;_originMidLeft;_originMidMid;_originMidRight;_originBotLeft;_originBotMid;_originBotRight;_transformMode;_transformOrigin;static style=Zp`
|
|
570
570
|
.container {
|
|
@@ -695,9 +695,9 @@ span {
|
|
|
695
695
|
</div>
|
|
696
696
|
</main>
|
|
697
697
|
</div>`;constructor(){super(),this._relativeButton=this._getDomElement("transform-button-relative"),this._absoluteButton=this._getDomElement("transform-button-absolute"),this._applyButton=this._getDomElement("transform-button-apply"),this._inputX=this._getDomElement("transform-input-x"),this._inputY=this._getDomElement("transform-input-y"),this._inputR=this._getDomElement("transform-input-r"),this._inputSpacingX=this._getDomElement("spacing-input-x"),this._inputSpacingY=this._getDomElement("spacing-input-y"),this._originTopLeft=this._getDomElement("origin-top-left"),this._originTopMid=this._getDomElement("origin-top-mid"),this._originTopRight=this._getDomElement("origin-top-right"),this._originMidLeft=this._getDomElement("origin-mid-left"),this._originMidMid=this._getDomElement("origin-mid-mid"),this._originMidRight=this._getDomElement("origin-mid-right"),this._originBotLeft=this._getDomElement("origin-bot-left"),this._originBotMid=this._getDomElement("origin-bot-mid"),this._originBotRight=this._getDomElement("origin-bot-right"),this._relativeButton.onclick=()=>this._changePositionMode("relative"),this._absoluteButton.onclick=()=>this._changePositionMode("absolute"),this._applyButton.onclick=()=>this._applyTransform(),this._transformMode="relative",this._changePositionMode(this._transformMode)}_changePositionMode(e){e=="relative"?(this._relativeButton.style.backgroundColor="#6F8A9D",this._relativeButton.style.color="black",this._absoluteButton.style.backgroundColor="#A4B5C1",this._absoluteButton.style.color="#77716E"):(this._absoluteButton.style.backgroundColor="#6F8A9D",this._absoluteButton.style.color="black",this._relativeButton.style.backgroundColor="#A4B5C1",this._relativeButton.style.color="#77716E"),this._transformMode=e}_applyTransform(){this._checkOrigin(),this._designerView=this.getRootNode().host.designerView;let e=this._designerView.instanceServiceContainer.selectionService.selectedElements;if(e=ne(e),this._selectionChanged=!1,this._designerView.instanceServiceContainer.selectionService.onSelectionChanged.once(()=>{this._selectionChanged=!0,this._previousSelectionRect=null}),e.length!=0){let t={x:isNaN(this._inputX.valueAsNumber)?null:this._inputX.valueAsNumber,y:isNaN(this._inputY.valueAsNumber)?null:this._inputY.valueAsNumber},i=this._inputR.valueAsNumber?this._inputR.valueAsNumber:0,r=e[0].openGroup("Transform selection");(!this._previousSelectionRect||this._selectionChanged)&&(this._previousSelectionRect=nr(e,this._designerView.designerCanvas));let n=this._calculateTransformOriginPosition(this._previousSelectionRect);for(let o of e){let a={x:parseFloat(o.getStyle("left")),y:parseFloat(o.getStyle("top")),width:parseFloat(o.getStyle("width")),height:parseFloat(o.getStyle("height"))},l=o.getStyle("transform"),c=0;l&&(c=parseFloat(o.getStyle("transform").replaceAll("rotate(","").replaceAll("deg)","")));let h=this._calculateTransform(this._previousSelectionRect,n,a,i,t,this._transformMode);o.setStyle("left",h.x.toString()+"px"),o.setStyle("top",h.y.toString()+"px");let d;for(this._transformMode=="relative"?d=c+i:d=i;d>=360;)d-=360;d!=0?o.setStyle("transform","rotate("+d+"deg)"):o.removeStyle("transform")}this._applySpacing(e),r.commit()}}_calculateTransformOriginPosition(e){switch(this._transformOrigin){case"topLeft":return{x:e.x,y:e.y};case"topMid":return{x:e.x+e.width/2,y:e.y};case"topRight":return{x:e.x+e.width,y:e.y};case"midLeft":return{x:e.x,y:e.y+e.height/2};case"midMid":return{x:e.x+e.width/2,y:e.y+e.height/2};case"midRight":return{x:e.x+e.width,y:e.y+e.height/2};case"botLeft":return{x:e.x,y:e.y+e.height};case"botMid":return{x:e.x+e.width/2,y:e.y+e.height};case"botRight":return{x:e.x+e.width,y:e.y+e.height}}}_checkOrigin(){this._originTopLeft.checked?this._transformOrigin="topLeft":this._originTopMid.checked?this._transformOrigin="topMid":this._originTopRight.checked?this._transformOrigin="topRight":this._originMidLeft.checked?this._transformOrigin="midLeft":this._originMidMid.checked?this._transformOrigin="midMid":this._originMidRight.checked?this._transformOrigin="midRight":this._originBotLeft.checked?this._transformOrigin="botLeft":this._originBotMid.checked?this._transformOrigin="botMid":this._originBotRight.checked&&(this._transformOrigin="botRight")}_calculateTransform(e,t,i,r,n,o){let a;r=r*(Math.PI/180),o=="absolute"&&(n.x&&(n.x=n.x-e.x),n.y&&(n.y=n.y-e.y)),t={x:t.x-i.width/2,y:t.y-i.height/2};let l={x:i.x-t.x,y:i.y-t.y};return a={x:Math.cos(r)*l.x-Math.sin(r)*l.y+t.x+n.x,y:Math.sin(r)*l.x+Math.cos(r)*l.y+t.y+n.y},a}_applySpacing(e){let t=this._inputSpacingX.valueAsNumber,i=this._inputSpacingY.valueAsNumber;if(!isNaN(t)){let r=e.sort((o,a)=>parseFloat(o.getStyle("left"))-parseFloat(a.getStyle("left"))),n=parseFloat(r[0].getStyle("left"));for(let o=0;o<r.length;o++)r[o].setStyle("left",o*t+n+"px")}if(!isNaN(i)){let r=e.sort((o,a)=>parseFloat(o.getStyle("top"))-parseFloat(a.getStyle("top"))),n=parseFloat(r[0].getStyle("top"));for(let o=0;o<r.length;o++)r[o].setStyle("top",o*i+n+"px")}}};customElements.define("node-projects-designer-transform-tool-popup",Bi)});var _s,ic=u(()=>{"use strict";We();q();tc();_s=class{provideButton(e){let t=new se(e,{"":{icon:v+"images/tools/TransformTool.svg"}});return t.popup=Bi,t}}});var ws,rc=u(()=>{"use strict";te();_e();J();Z();ws=class extends L{_line1;_line2;_line3;_line4;_designerView;constructor(e,t,i){super(e,t,i),this._designerView=t}extend(){this.refresh()}refresh(){let e=this._designerView.instanceServiceContainer.selectionService.selectedElements;if(e.length>1){e=ne(e);let t=nr(e,this._designerView);this._line1=this._drawLine(t.x,t.y,t.x+t.width,t.y,"svg-multiple-rect-selection",this._line1,I.Background),this._line2=this._drawLine(t.x+t.width,t.y,t.x+t.width,t.y+t.height,"svg-multiple-rect-selection",this._line2,I.Background),this._line3=this._drawLine(t.x+t.width,t.y+t.height,t.x,t.y+t.height,"svg-multiple-rect-selection",this._line3,I.Background),this._line4=this._drawLine(t.x,t.y+t.height,t.x,t.y,"svg-multiple-rect-selection",this._line4,I.Background),this._line1.style.strokeWidth=(2/this.designerCanvas.zoomFactor).toString(),this._line2.style.strokeWidth=(2/this.designerCanvas.zoomFactor).toString(),this._line3.style.strokeWidth=(2/this.designerCanvas.zoomFactor).toString(),this._line4.style.strokeWidth=(2/this.designerCanvas.zoomFactor).toString()}}dispose(){this._removeAllOverlays()}}});import{css as $p}from"@node-projects/base-custom-webcomponent";var Ss,nc=u(()=>{"use strict";rc();Ss=class{shouldExtend(e,t,i){return!i.isRootItem&&!(i.element instanceof HTMLTemplateElement)}getExtension(e,t,i){return new ws(e,t,i)}static style=$p`
|
|
698
|
-
.svg-multiple-rect-selection { stroke: #909090; stroke-dasharray: 3; fill: transparent; stroke-width: 2;
|
|
698
|
+
.svg-multiple-rect-selection { stroke: #909090; stroke-dasharray: 3; fill: transparent; stroke-width: 2; }
|
|
699
699
|
`}});var Cs,sc=u(()=>{"use strict";Q();De();q();Cs=class{_dragOverExtensionItem;_oldX;_oldY;_currentDragDropFormatNameElementDefinition;constructor(){window.addEventListener("dragstart",e=>{let t=e.dataTransfer;if(!t)return;let i=t.setData.bind(t);t.setData=(r,n)=>(r==Bt&&(this._currentDragDropFormatNameElementDefinition=n),i(r,n))},!0),window.addEventListener("dragend",e=>{this._currentDragDropFormatNameElementDefinition=null},!0)}dragEnter(e,t){}dragLeave(e,t){this._dragOverExtensionItem&&(e.extensionManager.removeExtension(this._dragOverExtensionItem,w.ContainerExternalDragOverAndCanBeEntered),this._dragOverExtensionItem=null)}async dragOver(e,t){let i=null,r=t.dataTransfer.getData(Bt);if(r||(r=this._currentDragDropFormatNameElementDefinition),r){let o=JSON.parse(r);o&&(i=await e.serviceContainer.forSomeServicesTillResult("instanceService",a=>a.getElement(o,e.serviceContainer,e.instanceServiceContainer)))}let[n]=this.getPossibleContainerForDragDrop(e,t,i?[i]:null);n||(n=e.rootDesignItem),this._dragOverExtensionItem!=n?(e.extensionManager.removeExtension(this._dragOverExtensionItem,w.ContainerExternalDragOverAndCanBeEntered),e.extensionManager.applyExtension(n,w.ContainerExternalDragOverAndCanBeEntered,t),this._dragOverExtensionItem=n):t.x!=this._oldX&&t.y!=this._oldY&&(this._oldX=t.x,this._oldY=t.y,e.extensionManager.refreshExtension(n,w.ContainerExternalDragOverAndCanBeEntered,t))}async drop(e,t){this._dragOverExtensionItem&&(e.extensionManager.removeExtension(this._dragOverExtensionItem,w.ContainerExternalDragOverAndCanBeEntered),this._dragOverExtensionItem=null);let i=t.dataTransfer.getData(Bt),r=JSON.parse(i),n=await e.serviceContainer.forSomeServicesTillResult("instanceService",f=>f.getElement(r,e.serviceContainer,e.instanceServiceContainer)),[o]=this.getPossibleContainerForDragDrop(e,t,[n]);o||(o=e.rootDesignItem);let a=n.openGroup("Insert of <"+n.name+">"),l=e.serviceContainer.getLastServiceWhere("containerService",f=>f.serviceForContainer(o,o.getComputedStyle(),n));l.enterContainer(o,[n],"drop");let c=e.getNormalizedElementCoordinates(o.element),h=e.getNormalizedEventCoordinates(t),d={x:h.x-c.x,y:h.y-c.y},p={x:0,y:0};r.mouseOffset&&(p=r.mouseOffset),l.place(t,e,o,p,{x:0,y:0},d,[n]),l.finishPlace(t,e,o,p,{x:0,y:0},d,[n]),requestAnimationFrame(()=>{e.instanceServiceContainer.selectionService.setSelectedElements([n],t),a.commit()})}getPossibleContainerForDragDrop(e,t,i){let r=null,n=null,o=e.elementsFromPoint(t.clientX,t.clientY);for(let a of o)if(a==e.rootDesignItem.element){r=e.rootDesignItem;let l=getComputedStyle(r.element);n=e.serviceContainer.getLastServiceWhere("containerService",c=>c.serviceForContainer(r,l));break}else{r=T.GetOrCreateDesignItem(a,a,e.serviceContainer,e.instanceServiceContainer);let l=getComputedStyle(r.element);if(n=e.serviceContainer.getLastServiceWhere("containerService",c=>c.serviceForContainer(r,l)),n){if(i&&n.canEnter(r,i)&&!(r.element instanceof r.window.SVGElement))break;if(!i&&n.isEnterableContainer(r)&&!(r.element instanceof r.window.SVGElement))break;r=null,n=null;continue}}return[r,n]}}});var ye,Hi=u(()=>{"use strict";ye=class s{constructor(){}static _windowEvents=[{name:"afterprint",propertyName:"onafterprint",eventObjectName:"Event"},{name:"beforeprint",propertyName:"onbeforeprint",eventObjectName:"Event"},{name:"beforeunload",propertyName:"onbeforeunload",eventObjectName:"Event"},{name:"error",propertyName:"onerror",eventObjectName:"Event"},{name:"load",propertyName:"onload",eventObjectName:"Event"},{name:"hashchange",propertyName:"onhashchange",eventObjectName:"Event"},{name:"message",propertyName:"onmessage",eventObjectName:"Event"},{name:"offline",propertyName:"onoffline",eventObjectName:"Event"},{name:"online",propertyName:"ononline",eventObjectName:"Event"},{name:"pageshow",propertyName:"onpageshow",eventObjectName:"Event"},{name:"popstate",propertyName:"onpopstate",eventObjectName:"Event"},{name:"resize",propertyName:"onresize",eventObjectName:"Event"},{name:"storage",propertyName:"onstorage",eventObjectName:"Event"},{name:"unload",propertyName:"onunload",eventObjectName:"Event"}];static _allElements=[{name:"contextmenu",propertyName:"oncontextmenu",eventObjectName:"PointerEvent"}];static _focusableEvents=[{name:"blur",propertyName:"onblur",eventObjectName:"FocusEvent"},{name:"focus",propertyName:"onfocus",eventObjectName:"FocusEvent"},{name:"keydown",propertyName:"onkeydown",eventObjectName:"KeyboardEvent"},{name:"keyup",propertyName:"onkeyup",eventObjectName:"KeyboardEvent"}];static _simpleForm=[{name:"input",propertyName:"oninput",eventObjectName:"InputEvent"},{name:"change",propertyName:"onchange",eventObjectName:"Event"}];static _form=[{name:"beforeinput",propertyName:"onbeforeinput",eventObjectName:"InputEvent"},{name:"invalid",propertyName:"oninvalid",eventObjectName:"Event"},{name:"reset",propertyName:"onreset",eventObjectName:"Event"},{name:"select",propertyName:"onselect",eventObjectName:"Event"},{name:"submit",propertyName:"onsubmit",eventObjectName:"SubmitEvent"}];static _simpleMouseEvents=[{name:"click",propertyName:"onclick",eventObjectName:"PointerEvent"},{name:"dblclick",propertyName:"ondblclick",eventObjectName:"MouseEvent"},{name:"wheel",propertyName:"onwheel",eventObjectName:"WheelEvent"},{name:"scroll",propertyName:"onscroll",eventObjectName:"Event"}];static _mouseEvents=[{name:"mousedown",propertyName:"onmousedown",eventObjectName:"MouseEvent"},{name:"mouseup",propertyName:"onmouseup",eventObjectName:"MouseEvent"},{name:"mousemove",propertyName:"onmousemove",eventObjectName:"MouseEvent"},{name:"mouseover",propertyName:"onmouseover",eventObjectName:"MouseEvent"},{name:"mouseout",propertyName:"onmouseout",eventObjectName:"MouseEvent"}];static _pointerEvents=[{name:"pointerdown",propertyName:"onpointerdown",eventObjectName:"PointerEvent"},{name:"pointerup",propertyName:"onpointerup",eventObjectName:"PointerEvent"},{name:"pointerenter",propertyName:"onpointerenter",eventObjectName:"PointerEvent"},{name:"pointerleave",propertyName:"onpointerleave",eventObjectName:"PointerEvent"},{name:"pointermove",propertyName:"onpointermove",eventObjectName:"PointerEvent"},{name:"pointerover",propertyName:"onpointerover",eventObjectName:"PointerEvent"},{name:"pointerout",propertyName:"onpointerout",eventObjectName:"PointerEvent"},{name:"pointercancel",propertyName:"onpointercancel",eventObjectName:"PointerEvent"}];static _touchEvents=[{name:"touchstart",propertyName:"ontouchstart",eventObjectName:"TouchEvent"},{name:"touchend",propertyName:"ontouchend",eventObjectName:"TouchEvent"},{name:"touchmove",propertyName:"ontouchmove",eventObjectName:"TouchEvent"},{name:"touchcancel",propertyName:"ontouchcancel",eventObjectName:"TouchEvent"}];static _dragEvents=[{name:"drag",propertyName:"ondrag",eventObjectName:"DragEvent"},{name:"dragend",propertyName:"ondragend",eventObjectName:"DragEvent"},{name:"dragenter",propertyName:"ondragenter",eventObjectName:"DragEvent"},{name:"dragleave",propertyName:"ondragleave",eventObjectName:"DragEvent"},{name:"dragover",propertyName:"ondragover",eventObjectName:"DragEvent"},{name:"dragstart",propertyName:"ondragstart",eventObjectName:"DragEvent"},{name:"drop",propertyName:"ondrop",eventObjectName:"DragEvent"}];static _clipboard=[{name:"copy",propertyName:"oncopy",eventObjectName:"ClipboardEvent"},{name:"cut",propertyName:"oncut",eventObjectName:"ClipboardEvent"},{name:"paste",propertyName:"onpaste",eventObjectName:"ClipboardEvent"}];static _details=[{name:"toggle",propertyName:"ontoggle",eventObjectName:"Event"}];static _allEvents=[...s._windowEvents,...s._form,...s._simpleMouseEvents,...s._mouseEvents,...s._pointerEvents,...s._touchEvents,...s._allElements,...s._focusableEvents,...s._dragEvents,...s._clipboard,...s._dragEvents];isHandledElementFromEventsService(e){return!0}getPossibleEvents(e){return e.element instanceof e.window.HTMLInputElement||e.element instanceof e.window.HTMLTextAreaElement||e.element instanceof e.window.HTMLSelectElement?[...s._simpleForm,...s._simpleMouseEvents,...s._form,...s._pointerEvents,...s._allElements,...s._focusableEvents]:[...s._simpleMouseEvents,...s._pointerEvents,...s._allElements,...s._focusableEvents]}getEvent(e,t){return s._allEvents.find(r=>r.name==t)??{name:t,propertyName:"on"+t,eventObjectName:"Event"}}}});import{DomHelper as qp,cssFromString as Qp}from"@node-projects/base-custom-webcomponent";var Es,oc=u(()=>{"use strict";Es=class{async provideDemo(e,t,i,r){let n=document.createElement("div"),o=n.attachShadow({mode:"open"});n.style.width="100%",n.style.height="100%",n.style.border="none",n.style.display="none",n.style.overflow="auto",n.style.position="absolute",e.style.position="relative",qp.removeAllChildnodes(e),e.appendChild(n);let a=[];i.designerCanvas.additionalStyles&&a.push(...i.designerCanvas.additionalStyles),i.stylesheetService&&a.push(...i.stylesheetService.getStylesheets().map(l=>Qp(l.content))),o.adoptedStyleSheets=a,o.innerHTML="","setHTMLUnsafe"in o?o.setHTMLUnsafe(r):o.innerHTML=r,n.style.display=""}}});var As,ac=u(()=>{"use strict";ee();_e();Z();As=class{_elementDefinition;_createdItem;_startPosition;_changeGroup;cursor="crosshair";_rect;constructor(e){this._elementDefinition=e}activated(e){}dispose(){this._createdItem&&this._createdItem.element.parentElement.removeChild(this._createdItem.element)}pointerEventHandler(e,t,i){switch(t.type){case x.PointerDown:this._onPointerDown(e,t);break;case x.PointerMove:this._onPointerMove(e,t);break;case x.PointerUp:this._onPointerUp(e,t);break}}keyboardEventHandler(e,t,i){}sizeOverlapThreshold=!1;async _onPointerDown(e,t){let i=e.getNormalizedEventCoordinates(t);t.preventDefault(),this._startPosition={x:i.x,y:i.y},this._changeGroup=e.rootDesignItem.openGroup("Insert Item"),this._createdItem=await e.serviceContainer.forSomeServicesTillResult("instanceService",r=>r.getElement(this._elementDefinition,e.serviceContainer,e.instanceServiceContainer)),this._createdItem.setStyle("position","absolute"),this._createdItem.setStyle("left",O(this._createdItem,i.x)+"px"),this._createdItem.setStyle("top",O(this._createdItem,i.y)+"px"),this._createdItem.setStyle("width","0"),this._createdItem.setStyle("height","0"),e.rootDesignItem.insertChild(this._createdItem),e.instanceServiceContainer.selectionService.clearSelectedElements()}async _onPointerMove(e,t){let i=e.getNormalizedEventCoordinates(t);if(this._createdItem){this._rect||(this._rect=document.createElementNS("http://www.w3.org/2000/svg","rect"),e.overlayLayer.addOverlay(this.constructor.name,this._rect,I.Foreground),this._rect.setAttribute("class","svg-draw-new-element"),this._rect.setAttribute("x",O(this._createdItem,this._startPosition.x)),this._rect.setAttribute("y",O(this._createdItem,this._startPosition.y)));let r=O(this._createdItem,i.x-this._startPosition.x),n=O(this._createdItem,i.y-this._startPosition.y);parseFloat(""+r)>=0&&(this._rect.setAttribute("width",r),this._createdItem.setStyle("width",r+"px")),parseFloat(""+n)>=0&&(this._rect.setAttribute("height",n),this._createdItem.setStyle("height",n+"px")),(parseFloat(""+r)>5||parseFloat(""+n)>5)&&(this.sizeOverlapThreshold=!0)}}async _onPointerUp(e,t){this.sizeOverlapThreshold?(this._changeGroup.commit(),e.instanceServiceContainer.selectionService.setSelectedElements([this._createdItem],t)):this._changeGroup.abort(),e.overlayLayer.removeOverlay(this._rect),this._startPosition=null,this._rect=null,this._createdItem=null,e.serviceContainer.globalContext.finishedWithTool(this)}}});var Ps,lc=u(()=>{"use strict";Ps=class{constructor(){}provideButtons(e,t){let i=document.createElement("div");i.className="toolbar-control",i.title="round pixels to";let r=document.createElement("input");return r.type="number",r.step="1",r.min="-1",r.valueAsNumber=e.serviceContainer.options.roundPixelsToDecimalPlaces,r.onchange=()=>e.serviceContainer.options.roundPixelsToDecimalPlaces=r.valueAsNumber,i.appendChild(r),[i]}}});var Is,cc=u(()=>{"use strict";Lt();ie();re();Is=class extends ke{commonMathProperties=[{name:"displaystyle",type:"boolean",service:this,defaultValue:!0,propertyType:y.propertyAndAttribute}];mathProperties=[{name:"display",type:"list",values:["block","inline"],service:this,defaultValue:"text",propertyType:y.propertyAndAttribute}];mfracProperties=[{name:"denomalign",type:"list",values:["left","center","right"],service:this,defaultValue:"center",propertyType:y.propertyAndAttribute},{name:"linethickness",type:"string",service:this,propertyType:y.propertyAndAttribute},{name:"numalign",type:"list",values:["left","center","right"],service:this,defaultValue:"center",propertyType:y.propertyAndAttribute}];name="mathml";getRefreshMode(e){return G.full}isHandledElement(e){return e.element instanceof e.window.MathMLElement}async getProperty(e,t){return(await this.getProperties(e)).find(i=>i.name==t)}async getProperties(e){if(!this.isHandledElement(e))return null;switch(e.element.localName){case"math":return[...this.commonMathProperties,...this.mathProperties];case"merror":return[...this.commonMathProperties];case"mfrac":return[...this.commonMathProperties,...this.mfracProperties];default:return[...this.commonMathProperties]}}}});function ks(s){let e=s;for(;e;){if(e instanceof(e.ownerDocument.defaultView??window).SVGSVGElement)return!0;if(e instanceof(e.ownerDocument.defaultView??window).SVGDefsElement||e instanceof(e.ownerDocument.defaultView??window).SVGMetadataElement)return!1;e=e.parentElement}return!0}var hc=u(()=>{"use strict"});function Jp(s){return s instanceof SVGRectElement?[{x:s.x.baseVal.value,y:s.y.baseVal.value},{x:s.x.baseVal.value+s.width.baseVal.value,y:s.y.baseVal.value},{x:s.x.baseVal.value+s.width.baseVal.value,y:s.y.baseVal.value+s.height.baseVal.value},{x:s.x.baseVal.value,y:s.y.baseVal.value+s.height.baseVal.value}]:s instanceof SVGLineElement?[{x:s.x1.baseVal.value,y:s.y1.baseVal.value},{x:s.x2.baseVal.value,y:s.y2.baseVal.value}]:null}var Ds,dc=u(()=>{"use strict";ee();J();Z();Ds=class extends L{constructor(e,t,i){super(e,t,i)}_parentRect;_svgElement;_circles=[];_points;_startPoint;_startPos;extend(){this._parentRect=this.extendedItem.element.parentElement.getBoundingClientRect(),this._svgElement=this.extendedItem.node,this.refresh()}refresh(){let e=Jp(this._svgElement);if(e&&this._valuesHaveChanges(this.designerCanvas.scaleFactor,...e.map(t=>t.x),...e.map(t=>t.y))){this._points=e;for(let t=0;t<this._points.length;t++)this._circles[t]=this._drawPathCircle(t,this._circles[t])}}dispose(){this._removeAllOverlays()}_drawPathCircle(e,t){let i=this._drawCircle((this._parentRect.x-this.designerCanvas.containerBoundingRect.x)/this.designerCanvas.scaleFactor+this._points[e].x,(this._parentRect.y-this.designerCanvas.containerBoundingRect.y)/this.designerCanvas.scaleFactor+this._points[e].y,5/this.designerCanvas.scaleFactor,"svg-path",t,I.Foreground);return i.style.strokeWidth=(1/this.designerCanvas.zoomFactor).toString(),t||(i.addEventListener(x.PointerDown,r=>this.pointerEvent(r,e,i)),i.addEventListener(x.PointerMove,r=>this.pointerEvent(r,e,i)),i.addEventListener(x.PointerUp,r=>this.pointerEvent(r,e,i))),i}pointerEvent(e,t,i,r){e.stopPropagation(),e.preventDefault();let n=this.designerCanvas.getNormalizedEventCoordinates(e),o=this._points[t];switch(e.type){case x.PointerDown:e.target.setPointerCapture(e.pointerId),this._startPos=n,this._startPoint={...o};break;case x.PointerMove:if(this._startPos&&e.buttons>0){let a=this._startPos.x-n.x,l=this._startPos.y-n.y;e.shiftKey&&(Math.abs(a)<Math.abs(l)?a=0:l=0),o.x=this._startPoint.x-a,o.y=this._startPoint.y-l,this.modifyElementPoint(this._svgElement,t,o),this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem],this)}break;case x.PointerUp:e.target.releasePointerCapture(e.pointerId),this._startPos=null;break}}modifyElementPoint(e,t,i){e instanceof SVGRectElement?(t==1?(this._points[0].y=i.y,this._points[2].x=i.x):t==3&&(this._points[2].y=i.y,this._points[0].x=i.x),e.x.baseVal.value=this._points[0].x,e.y.baseVal.value=this._points[0].y,e.width.baseVal.value=this._points[2].x-this._points[0].x,e.height.baseVal.value=this._points[2].y-this._points[0].y):e instanceof SVGLineElement&&(e.x1.baseVal.value=this._points[0].x,e.y1.baseVal.value=this._points[0].y,e.x2.baseVal.value=this._points[1].x,e.y2.baseVal.value=this._points[1].y)}_getMinMaxValues(e){let t={xMin:0,xMax:0,yMin:0,yMax:0};for(let i=0;i<e.length-2;i++)e[i]<e[i+1]&&i<=3?t.xMin=e[i]:e[i]<e[i+1]&&i>3&&i<=7&&(t.yMin=e[i]),e[i]>e[i+1]&&i<=3?t.xMax=e[i]:e[i]>e[i+1]&&i>3&&i<=8&&(t.yMax=e[i]);return t}}});var Ts,pc=u(()=>{"use strict";hc();dc();Ts=class{shouldExtend(e,t,i){return i.node instanceof SVGRectElement||i.node instanceof SVGLineElement||i.node instanceof SVGCircleElement||i.node instanceof SVGPathElement?ks(i.node):!1}getExtension(e,t,i){return new Ds(e,t,i)}}});var it,mc=u(()=>{"use strict";it=class{constructor(e,t,i=!1){this.extensionProvider=e,this.condition=t,this.style=e.style??e.constructor.style,this.svgDefs=e.svgDefs??e.constructor.svgDefs}extensionProvider;condition;style;svgDefs;shouldExtend(e,t,i){return this.condition(i,t)?this.extensionProvider.shouldExtend(e,t,i):!1}getExtension(e,t,i){return this.extensionProvider.getExtension(e,t,i)}}});var Ue,Ce,Le=u(()=>{"use strict";q();J();Ue="basicStackedToolbarExtensionShowOverlay",Ce=class s extends L{static basicTemplate=`
|
|
700
|
-
<select title="position" id="position" style="pointer-events:
|
|
700
|
+
<select title="position" id="position" style="pointer-events: auto; height: 24px; width: 80px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
|
|
701
701
|
<option>static</option>
|
|
702
702
|
<option>relative</option>
|
|
703
703
|
<option>absolute</option>
|
|
@@ -707,7 +707,7 @@ span {
|
|
|
707
707
|
<img data-value="block" title="block" src="${v}images/display/block.svg">
|
|
708
708
|
<img data-value="inline" title="inline" src="${v}images/display/inline.svg">
|
|
709
709
|
</node-projects-image-button-list-selector>
|
|
710
|
-
<select title="display" id="displayType" style="pointer-events:
|
|
710
|
+
<select title="display" id="displayType" style="pointer-events: auto; height: 24px; width: 80px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
|
|
711
711
|
<option>block</option>
|
|
712
712
|
<option>flex</option>
|
|
713
713
|
<option>grid</option>
|
|
@@ -715,7 +715,7 @@ span {
|
|
|
715
715
|
`;static toolBars=[];_toolbar;_size={width:220,height:30};_display;_inline;constructor(e,t,i){super(e,t,i)}extend(e,t){let i=getComputedStyle(this.extendedItem.element);this._display=i.display.replace("inline-","").replace("inline","block"),this._inline=i.display.startsWith("inline")?"inline":"block",this._toolbar=this.createToolbar(this.constructor.template,this._size.width,this._size.height),s.toolBars.push(this._toolbar);let r=this._toolbar.getById("position");r&&(r.value=i.position,r.onchange=async()=>{await this.extendedItem.updateStyleInSheetOrLocalAsync("position",r.value),this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem])});let n=this._toolbar.getById("displayType");n&&(n.value=this._display,n.onchange=async()=>{this._display=n.value,await this.updateDisplayValue(),this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem])});let o=this._toolbar.getById("inline");o&&(o.value=this._inline,o.addEventListener("value-changed",async()=>{this._inline=o.value,this._inline&&i.position==="absolute"&&this.extendedItem.setStyle("position","static"),await this.updateDisplayValue(),this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem])}))}async updateDisplayValue(){let e=(this._inline=="inline"?"inline ":"")+this._display;e==="inline block"&&(e="inline"),await this.extendedItem.updateStyleInSheetOrLocalAsync("display",e)}refresh(e,t){if(t){let i=this.designerCanvas.getNormalizedEventCoordinates(t),r=0;for(let n=0;n<s.toolBars.length-1&&s.toolBars[n]!==this._toolbar;n++)r+=this._toolbar.children[0].getBoundingClientRect().height+4;this._toolbar.updatePosition({x:i.x-16/this.designerCanvas.zoomFactor,y:i.y-r-(this._size.height+14)/this.designerCanvas.zoomFactor})}}_addStyleButton(e){let t=getComputedStyle(this.extendedItem.element),i=this._toolbar.getById(e);i.addEventListener("value-changed",async()=>{await this.extendedItem.updateStyleInSheetOrLocalAsync(e,i.value)}),i.value=t[e]}dispose(){s.toolBars.splice(s.toolBars.indexOf(this._toolbar),1),this._removeAllOverlays()}}});import{html as em}from"@node-projects/base-custom-webcomponent";var Ms,uc=u(()=>{"use strict";Le();q();Ms=class extends Ce{static template=em`
|
|
716
716
|
<div style="height: 100%; width: 100%;">
|
|
717
717
|
${Ce.basicTemplate}
|
|
718
|
-
<select title="display" id="gridType" style="pointer-events:
|
|
718
|
+
<select title="display" id="gridType" style="pointer-events: auto; height: 24px; width: 60px; padding: 0; margin-right: 10px">
|
|
719
719
|
<option>1x1</option>
|
|
720
720
|
<option>1x16</option>
|
|
721
721
|
<option>2x8</option>
|
|
@@ -799,11 +799,11 @@ span {
|
|
|
799
799
|
<div style="height: 100%; width: 100%;">
|
|
800
800
|
<div style="display: flex; flex-direction: column;">
|
|
801
801
|
<span style="font-size: 10px; color: #00aff0;">column:</span>
|
|
802
|
-
<input type="text" title="column" id="gridColumn" style="pointer-events:
|
|
802
|
+
<input type="text" title="column" id="gridColumn" style="pointer-events: auto; height: 12px; width: 45px; padding: 0; margin-right: 5px">
|
|
803
803
|
</div>
|
|
804
804
|
<div style="display: flex; flex-direction: column;">
|
|
805
805
|
<span style="font-size: 10px; color: #00aff0;">row:</span>
|
|
806
|
-
<input type="text" title="column" id="gridRow" style="pointer-events:
|
|
806
|
+
<input type="text" title="column" id="gridRow" style="pointer-events: auto; height: 12px; width: 45px; padding: 0; margin-right: 10px">
|
|
807
807
|
</div>
|
|
808
808
|
<node-projects-image-button-list-selector property="align-self" no-value-in-header id="align-self">
|
|
809
809
|
<img title="start" data-value="start" src="${v}images/chromeDevtools/align-items-start-icon.svg">
|
|
@@ -830,7 +830,7 @@ span {
|
|
|
830
830
|
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe-padding)" />
|
|
831
831
|
</mask>
|
|
832
832
|
`}});var Ws,Ac=u(()=>{"use strict";ee();qt();J();Ws=class extends L{_actionModeStarted;_initialPoint;_circle1;_circle2;_circle3;_circle4;_circle5;_circle6;_circle7;_circle8;_initialComputedTransformOrigins;_initialTransformOrigins;_styleBackup;constructor(e,t,i){super(e,t,i)}extend(e,t){this.refresh(e,t)}refresh(e,t){let i=this.extendedItem.element.getBoxQuads({box:"border",relativeTo:this.designerCanvas.canvas})[0];if(isNaN(i.p1.x)||isNaN(i.p2.x)){this.remove();return}this._valuesHaveChanges(this.designerCanvas.zoomFactor,i.p1.x,i.p1.y,i.p2.x,i.p2.y,i.p4.x,i.p4.y,i.p3.x,i.p3.y)&&(this._circle1=this._drawResizerOverlay(i.p1.x,i.p1.y,"nw-resize",this._circle1),this._circle2=this._drawResizerOverlay(i.p1.x+(i.p2.x-i.p1.x)/2,i.p1.y+(i.p2.y-i.p1.y)/2,"n-resize",this._circle2),this._circle3=this._drawResizerOverlay(i.p2.x,i.p2.y,"ne-resize",this._circle3),this._circle4=this._drawResizerOverlay(i.p1.x+(i.p4.x-i.p1.x)/2,i.p1.y+(i.p4.y-i.p1.y)/2,"w-resize",this._circle4),this._circle5=this._drawResizerOverlay(i.p4.x,i.p4.y,"sw-resize",this._circle5),this._circle6=this._drawResizerOverlay(i.p4.x+(i.p3.x-i.p4.x)/2,i.p4.y+(i.p3.y-i.p4.y)/2,"s-resize",this._circle6),this._circle8=this._drawResizerOverlay(i.p2.x+(i.p3.x-i.p2.x)/2,i.p2.y+(i.p3.y-i.p2.y)/2,"e-resize",this._circle8),this._circle7=this._drawResizerOverlay(i.p3.x,i.p3.y,"se-resize",this._circle7))}_drawResizerOverlay(e,t,i,r){let n=this._drawCircle(e,t,this.designerCanvas.serviceContainer.options.resizerPixelSize/this.designerCanvas.zoomFactor,"svg-grid-resizer",r);return n.style.strokeWidth=(1/this.designerCanvas.zoomFactor).toString(),r||(n.addEventListener(x.PointerDown,o=>this._pointerActionTypeResize(n,o,i)),n.addEventListener(x.PointerMove,o=>this._pointerActionTypeResize(n,o,i)),n.addEventListener(x.PointerUp,o=>this._pointerActionTypeResize(n,o,i))),n.style.cursor=i,n}_pointerActionTypeResize(e,t,i){t.stopPropagation();let r=this.designerCanvas.getNormalizedEventCoordinates(t);switch(t.type){case x.PointerDown:this._styleBackup=this.extendedItem.element.getAttribute("style"),t.target.setPointerCapture(t.pointerId),this._initialPoint=r,this._actionModeStarted=i,this._initialComputedTransformOrigins=[],this._initialTransformOrigins=[];let n=getComputedStyle(this.extendedItem.element).transformOrigin.split(" ").map(f=>parseFloat(f.replace("px",""))),o=new DOMPoint(n[0],n[1]);this._initialComputedTransformOrigins.push(o),this._initialTransformOrigins.push(this.extendedItem.element.style.transformOrigin);break;case x.PointerMove:if(this._initialPoint){let f=0,m=0,g=0,_=0,b=Ge(this.extendedItem.parent),C=this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.parent.element),k=this.designerCanvas.getNormalizedEventCoordinates(t),P=getComputedStyle(this.extendedItem.element);if(this.extendedItem.element.style.gridColumnStart=P.gridColumnStart,this.extendedItem.element.style.gridColumnEnd=P.gridColumnEnd==="auto"?""+(parseInt(P.gridColumnStart)+1):P.gridColumnEnd,this.extendedItem.element.style.gridRowStart=P.gridRowStart,this.extendedItem.element.style.gridRowEnd=P.gridRowEnd==="auto"?""+(parseInt(P.gridRowStart)+1):P.gridRowEnd,this._actionModeStarted=="nw-resize"||this._actionModeStarted=="w-resize"||this._actionModeStarted=="sw-resize"){for(let A=0;A<b.cells.length;A++){let R=b.cells[A][0],H=f+R.width/2;k.x>C.x+H&&(g=A),f+=R.width+b.xGap}this.extendedItem.element.style.gridColumnStart=""+(g+2)}if(this._actionModeStarted=="nw-resize"||this._actionModeStarted=="n-resize"||this._actionModeStarted=="ne-resize"){for(let A=0;A<b.cells.length;A++){let R=b.cells[A][0],H=m+R.height/2;k.y>C.y+H&&(_=A),m+=R.height+b.yGap}this.extendedItem.element.style.gridRowStart=""+(_+2)}if(this._actionModeStarted=="se-resize"||this._actionModeStarted=="e-resize"||this._actionModeStarted=="ne-resize"){for(let A=0;A<b.cells.length;A++){let R=b.cells[A][0],H=f+R.width/2;k.x>C.x+H&&(g=A),f+=R.width+b.xGap}this.extendedItem.element.style.gridColumnEnd=""+(g+2)}if(this._actionModeStarted=="sw-resize"||this._actionModeStarted=="s-resize"||this._actionModeStarted=="se-resize"){for(let A=0;A<b.cells[0].length;A++){let R=b.cells[0][A],H=m+R.height/2;k.y>C.y+H&&(_=A),m+=R.height+b.yGap}this.extendedItem.element.style.gridRowEnd=""+(_+2)}let D=[this.extendedItem,this.extendedItem.parent];this.extensionManager.refreshExtensions(D)}break;case x.PointerUp:t.target.releasePointerCapture(t.pointerId);let a=getComputedStyle(this.extendedItem.element),l=a.gridColumnStart,c=a.gridColumnEnd,h=a.gridRowStart,d=a.gridRowEnd;this._styleBackup?this.extendedItem.element.setAttribute("style",this._styleBackup):this.extendedItem.element.removeAttribute("style");let p=this.extendedItem.openGroup("Resize <"+this.extendedItem.name+">");this.extendedItem.setStyle("gridColumnStart",l),this.extendedItem.setStyle("gridColumnEnd",c),this.extendedItem.setStyle("gridRowStart",h),this.extendedItem.setStyle("gridRowEnd",d),p.commit(),this._initialPoint=null;break}}dispose(){this._removeAllOverlays()}}});import{css as nm}from"@node-projects/base-custom-webcomponent";var js,Pc=u(()=>{"use strict";$();Ac();js=class{shouldExtend(e,t,i){return i.nodeType===E.Element&&i.parent?.nodeType===E.Element&&getComputedStyle(i.parent.element).display==="grid"}getExtension(e,t,i){return new Ws(e,t,i)}static style=nm`
|
|
833
|
-
.svg-grid-resizer { stroke: #3899ec; fill: white; pointer-events:
|
|
833
|
+
.svg-grid-resizer { stroke: #3899ec; fill: white; pointer-events: auto; }
|
|
834
834
|
`}});var Us,Ic=u(()=>{"use strict";Qe();$();q();Us=class{shouldProvideContextmenu(e,t,i,r){return i?.instanceServiceContainer.selectionService.selectedElements.length>1?!i?.isRootItem&&i?.nodeType==E.Element:!1}provideContextMenuItems(e,t,i){return[{title:"align left",icon:`<img src="${v+"icons/alignHorizontalLeft.svg"}">`,action:()=>{t.executeCommand({type:S.arrangeLeft})}},{title:"align center",icon:`<img src="${v+"icons/alignHorizontalCenter.svg"}">`,action:()=>{t.executeCommand({type:S.arrangeCenter})}},{title:"align right",icon:`<img src="${v+"icons/alignHorizontalRight.svg"}">`,action:()=>{t.executeCommand({type:S.arrangeRight})}},{title:"distribute horizontal",icon:`<img src="${v+"icons/horizontalDistribute.svg"}">`,action:()=>{t.executeCommand({type:S.distributeHorizontal})}},{title:"align top",icon:`<img src="${v+"icons/alignVerticalTop.svg"}">`,action:()=>{t.executeCommand({type:S.arrangeTop})}},{title:"align middle",icon:`<img src="${v+"icons/alignVerticalCenter.svg"}">`,action:()=>{t.executeCommand({type:S.arrangeMiddle})}},{title:"align bottom",icon:`<img src="${v+"icons/alignVerticalBottom.svg"}">`,action:()=>{t.executeCommand({type:S.arrangeBottom})}},{title:"distribute vertical",icon:`<img src="${v+"icons/verticalDistribute.svg"}">`,action:()=>{t.executeCommand({type:S.distributeVertical})}}]}}});var Ks,kc=u(()=>{"use strict";ie();re();ve();ue();Ks=class extends Y{name="webcomponent";getRefreshMode(e){return G.full}isHandledElement(e){let t=e.element.constructor?.observedAttributes;return!!(t&&t.length>0)}async getProperty(e,t){return(await this.getProperties(e)).find(i=>i.name==t)}async getProperties(e){return(e.element.constructor?.observedAttributes).map(i=>({name:N.dashToCamelCase(i),type:"string",service:this,propertyType:y.propertyAndAttribute}))}}});var Ys,Dc=u(()=>{"use strict";J();Ys=class extends L{constructor(e,t,i){super(e,t,i)}_path;_rect;_clickRect;_g;extend(e,t){this.refresh(e,t)}refresh(e,t){let i=this.extendedItem.element.getBoxQuads({box:"border",relativeTo:this.designerCanvas.canvas})[0];if(i&&!isNaN(i.p2.x)&&this._valuesHaveChanges(i.p1.x,i.p1.y,i.p2.x,i.p2.y,this.designerCanvas.scaleFactor)){let r=Math.atan2(i.p2.y-i.p1.y,i.p2.x-i.p1.x)*180/Math.PI,n=15/this.designerCanvas.scaleFactor;this._rect=this._drawRect(0,0,n,n,"svg-previous-select",this._rect),this._clickRect=this._drawRect(0,0,n,n,"svg-invisible",this._clickRect),this._g||(this._g=document.createElementNS("http://www.w3.org/2000/svg","g"),this._g.setAttribute("class","svg-previous-select"),this._path=document.createElementNS("http://www.w3.org/2000/svg","path"),this._path.setAttribute("d","m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"),this._g.appendChild(this._rect),this._g.appendChild(this._path),this._addOverlay(this._g),this._clickRect.onpointerdown=o=>{o.preventDefault(),o.stopPropagation(),this.extendedItem.instanceServiceContainer.selectionService.setSelectedElements([this.extendedItem.parent])},this._clickRect.onpointermove=o=>{o.preventDefault(),o.stopPropagation()},this._g.appendChild(this._clickRect)),this._path.style.scale=(.6/this.designerCanvas.scaleFactor).toString(),this._g.style.translate=i.p2.x-14.5/this.designerCanvas.scaleFactor+"px "+(i.p2.y-15/this.designerCanvas.scaleFactor)+"px",this._g.style.rotate=r+"deg",this._g.style.transformOrigin="100% 100%",this._g.style.transformBox="fill-box"}}dispose(){this._removeAllOverlays()}}});import{css as sm}from"@node-projects/base-custom-webcomponent";var Xs,Tc=u(()=>{"use strict";Dc();Xs=class{shouldExtend(e,t,i){return!i.isRootItem&&!(i.element instanceof HTMLTemplateElement)}getExtension(e,t,i){return new Ys(e,t,i)}static style=sm`
|
|
835
835
|
rect.svg-previous-select { stroke: none; fill: #3899ec; pointer-events: auto; }
|
|
836
836
|
g.svg-previous-select { fill: white; pointer-events: auto; }
|
|
@@ -920,7 +920,7 @@ span {
|
|
|
920
920
|
background: var(--medium-grey, #2f3545);
|
|
921
921
|
height: calc(100% - 30px);
|
|
922
922
|
}
|
|
923
|
-
`;constructor(){super();let e=document.createElement("div");e.className="outer",this.shadowRoot.appendChild(e),this._headerDiv=document.createElement("div"),this._headerDiv.className="header",e.appendChild(this._headerDiv),this._moreDiv=document.createElement("div"),this._moreDiv.className="header header-more",this._moreDiv.innerText="<<",e.appendChild(this._moreDiv),this._moreContainer=document.createElement("div"),this._moreContainer.className="more-container",this._moreContainer.style.visibility="hidden",e.appendChild(this._moreContainer),this._moreDiv.onclick=()=>{this._moreContainer.children.length&&this._moreContainer.style.visibility=="hidden"?this._moreContainer.style.visibility="visible":this._moreContainer.style.visibility="hidden"},this._panels=document.createElement("div"),this._panels.className="panels",e.appendChild(this._panels);let t=document.createElement("slot");t.name="panels",this._panels.appendChild(t),new ResizeObserver(r=>{this._showHideHeaderItems()}).observe(this._headerDiv)}_showHideHeaderItems(){this._moreContainer.style.visibility="hidden";let e=0;rh.removeAllChildnodes(this._moreContainer),rh.removeAllChildnodes(this._headerDiv);let t=!0;for(let i of this.children)if(i.style.display!="none"){let r=i;!this._elementMap.has(r)&&t&&(this.refreshItems(),t=!1);let n=this._elementMap.get(r);this._moreContainer.appendChild(n),(this._headerDiv.children.length==0||e+n.clientWidth/2<this._headerDiv.clientWidth)&&(this._headerDiv.appendChild(n),e+=n.clientWidth)}}connectedCallback(){if(this._firstConnect){this.refreshItems(),this._firstConnect=!1;let e=this.getAttribute("selected-index");e&&(this.selectedIndex=parseInt(e))}}get selectedIndex(){return this._firstConnect?-1:this._selectedIndex}set selectedIndex(e){let t=this._selectedIndex;this._selectedIndex=e,this.children.length&&t!=this._selectedIndex&&this._selectedIndexChanged(t)}refreshItems(){this._headerDiv.innerHTML="";let e=0;for(let t of this.children)if(t.style.display!="none"){let i=t,r=document.createElement("div");r.innerText=i.title,r.title=i.title,r.className="tab-header";let n=e;r.onpointerdown=()=>{let o=this._selectedIndex;this._selectedIndex=n,this._headerDiv.children.length&&this._selectedIndexChanged(o,!0),this._moreContainer.style.visibility="hidden"},this._elementMap.set(i,r),this._headerDiv.appendChild(r),e++}this._showHideHeaderItems(),this._selectedIndexChanged()}_selectedIndexChanged(e,t=!1){let i=-1;for(let r of this.children)if(r.style.display!="none")if(i++,i==this._selectedIndex){r.slot!="panels"&&(r.slot="panels");let n=this._elementMap.get(r);n&&(n.classList.add("selected"),r.activated&&r.activated())}else{r.removeAttribute("slot");let n=this._elementMap.get(r);n&&n.classList.remove("selected")}this.onSelectedTabChanged.emit({newIndex:this._selectedIndex,oldIndex:e,changedViaClick:t}),this._moreContainer.style.visibility="hidden"}onSelectedTabChanged=new Ad};customElements.define("node-projects-designer-tab-control",Ye);var wo=class{host;root;trough;button1;button2;thumb;isConnected=!1;thumbSize=.3;value=0;orientation=!1;clickRepeatDelay=300;clickRepeatInterval=100;defaultThumbMinSize=25;dragStartPos;dragStartValue;eventTimeoutId;pointerCaptureId;pointerCaptureElement;thumbDragging;button1Active;button2Active;troughActive;constructor(e){this.host=e,e.attachShadow({mode:"open"});let t=e.shadowRoot;t.innerHTML=kd,this.root=t.querySelector("#root"),this.trough=t.querySelector("#trough"),this.button1=t.querySelector("#button1"),this.button2=t.querySelector("#button2"),this.thumb=t.querySelector("#thumb"),this.trough.addEventListener("pointerdown",this.onTroughPointerDown),this.trough.addEventListener("pointerup",this.onPointerUp),this.trough.addEventListener("pointercancel",this.onPointerUp),this.button1.addEventListener("pointerdown",i=>this.onButtonPointerDown(i,1)),this.button1.addEventListener("pointerup",this.onPointerUp),this.button1.addEventListener("pointercancel",this.onPointerUp),this.button1.addEventListener("contextmenu",i=>i.preventDefault()),this.button2.addEventListener("pointerdown",i=>this.onButtonPointerDown(i,2)),this.button2.addEventListener("pointerup",this.onPointerUp),this.button2.addEventListener("pointercancel",this.onPointerUp),this.button2.addEventListener("contextmenu",i=>i.preventDefault()),this.thumb.addEventListener("pointerdown",this.onThumbPointerDown),this.thumb.addEventListener("pointerup",this.onPointerUp),this.thumb.addEventListener("pointercancel",this.onPointerUp),this.thumb.addEventListener("pointermove",this.onThumbPointerMove),this.resetInteractionState()}resetInteractionState(){this.thumbDragging=!1,this.button1Active=!1,this.button2Active=!1,this.troughActive=!1}connectedCallback(){this.isConnected=!0,this.resetInteractionState(),this.updateLayout(),this.updateStyle()}disconnectedCallback(){this.isConnected=!1,this.resetInteractionState(),this.stopEventRepetition(),this.stopPointerCapture()}updateLayout(){this.isConnected&&(this.root.classList.toggle("horizontal",!this.orientation),this.root.classList.toggle("vertical",this.orientation),this.thumb.style.display=this.thumbSize==0?"none":"",this.thumb.style.height=this.orientation?qi(this.getEffectiveThumbSize()):"",this.thumb.style.width=this.orientation?"":qi(this.getEffectiveThumbSize()),this.thumb.style.top="",this.thumb.style.left="",this.updateThumbPosition())}updateStyle(){this.isConnected&&(this.thumb.classList.toggle("active",this.thumbDragging),this.button1.classList.toggle("active",this.button1Active),this.button2.classList.toggle("active",this.button2Active),this.troughActive)}updateThumbPosition(){let e=(1-this.getEffectiveThumbSize())*this.value;this.orientation?this.thumb.style.top=qi(e):this.thumb.style.left=qi(e)}getThroughSize(){return this.orientation?this.trough.clientHeight:this.trough.clientWidth}computeThumbMoveValue(e){let t=this.getThroughSize()*(1-this.getEffectiveThumbSize());return t<Pd?0:e/t}setThumbSize(e){let t=Math.max(0,Math.min(1,e));t!=this.thumbSize&&(this.thumbSize=t,this.updateLayout())}getThumbMinSize(){let e=this.getCssVar("--plain-scrollbar-thumb-min-size");if(!e)return this.defaultThumbMinSize;let t=Td(e);return t||this.defaultThumbMinSize}getEffectiveThumbSize(){let e=this.getThumbMinSize(),t=this.getThroughSize();if(!t)return this.thumbSize;let i=Math.min(1,e/t);return Math.max(i,this.thumbSize)}setValue(e){let t=Math.max(0,Math.min(1,e));return t==this.value?!1:(this.value=isNaN(t)?0:t,this.updateThumbPosition(),!0)}setOrientation(e){return e==this.orientation?!1:(this.orientation=e,this.updateLayout(),!0)}getCssVar(e){let t=getComputedStyle(this.root).getPropertyValue(e);return t?t.trim():null}fireEvent(e){let t=new CustomEvent("scrollbar-input",{detail:e});this.host.dispatchEvent(t)}fireEventRepeatedly(e,t,i,r=0){this.stopEventRepetition(),this.fireEvent(e);let n=r==0?t:i,o=()=>this.fireEventRepeatedly(e,t,i,r+1);this.eventTimeoutId=setTimeout(o,n)}stopEventRepetition(){this.eventTimeoutId&&(clearTimeout(this.eventTimeoutId),this.eventTimeoutId=void 0)}startPointerCapture(e,t){this.stopPointerCapture(),e.setPointerCapture(t),this.pointerCaptureElement=e,this.pointerCaptureId=t}stopPointerCapture(){this.pointerCaptureId&&(this.pointerCaptureElement.releasePointerCapture(this.pointerCaptureId),this.pointerCaptureId=void 0)}onTroughPointerDown=e=>{if(!this.isConnected||this.pointerCaptureId||!e.isPrimary||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||e.button!=0)return;let t=this.trough.getBoundingClientRect(),i=this.orientation?e.clientY-t.top:e.clientX-t.left,r=(this.orientation?t.height:t.width)*(1-this.getEffectiveThumbSize())*this.value,o=i>r?"incrementLarge":"decrementLarge";this.troughActive=!0,e.preventDefault(),this.startPointerCapture(this.trough,e.pointerId),this.fireEventRepeatedly(o,this.clickRepeatDelay,this.clickRepeatInterval)};onButtonPointerDown=(e,t)=>{if(!this.isConnected||this.pointerCaptureId||!e.isPrimary||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||e.button!=0)return;switch(t){case 1:this.button1Active=!0;break;case 2:this.button2Active=!0;break}let i=t==1?"decrementSmall":"incrementSmall";this.updateStyle(),e.preventDefault();let r=t==1?this.button1:this.button2;this.startPointerCapture(r,e.pointerId),this.fireEventRepeatedly(i,this.clickRepeatDelay,this.clickRepeatInterval)};onThumbPointerDown=e=>{!this.isConnected||this.pointerCaptureId||!e.isPrimary||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||e.button!=0||(this.dragStartPos=this.orientation?e.clientY:e.clientX,this.dragStartValue=this.value,this.thumbDragging=!0,this.updateStyle(),e.preventDefault(),this.startPointerCapture(this.thumb,e.pointerId))};onThumbPointerMove=e=>{if(!this.isConnected||!e.isPrimary||!this.thumbDragging)return;let i=(this.orientation?e.clientY:e.clientX)-this.dragStartPos,r=this.computeThumbMoveValue(i),n=this.dragStartValue+r;e.preventDefault(),this.setValue(n)&&this.fireEvent("value")};onPointerUp=e=>{this.isConnected&&e.isPrimary&&(this.resetInteractionState(),this.updateStyle(),this.stopEventRepetition(),this.stopPointerCapture(),e.preventDefault())}},So=class extends HTMLElement{widget;constructor(){super(),this.widget=new wo(this);let e=parseFloat(this.getAttribute("value"));if(isNaN(e)||(this.widget.value=e),this.hasOwnProperty("value")){let t=this.value;delete this.value,isNaN(t)||(this.widget.value=t)}}connectedCallback(){this.widget.connectedCallback()}disconnectedCallback(){this.widget.disconnectedCallback()}get thumbSize(){return this.widget.thumbSize}set thumbSize(e){this.widget.setThumbSize(e)}get value(){return this.widget.value}set value(e){this.widget.setValue(e)}get orientation(){return Dd(this.widget.orientation)}set orientation(e){this.widget.setOrientation(nh(e))&&this.setAttribute("orientation",this.orientation)}get orientationBoolean(){return this.widget.orientation}static get observedAttributes(){return["orientation"]}attributeChangedCallback(e,t,i){switch(e){case"orientation":{i&&this.widget.setOrientation(nh(i));break}}}},Pd=1e-9,nt="var(--plain-scrollbar-button-size, 13px)",$i='<path d="M -60 30 h 120 L 0 -30 z" stroke-width="0"/>',Id=`
|
|
923
|
+
`;constructor(){super();let e=document.createElement("div");e.className="outer",this.shadowRoot.appendChild(e),this._headerDiv=document.createElement("div"),this._headerDiv.className="header",e.appendChild(this._headerDiv),this._moreDiv=document.createElement("div"),this._moreDiv.className="header header-more",this._moreDiv.innerText="<<",e.appendChild(this._moreDiv),this._moreContainer=document.createElement("div"),this._moreContainer.className="more-container",this._moreContainer.style.visibility="hidden",e.appendChild(this._moreContainer),this._moreDiv.onclick=()=>{this._moreContainer.children.length&&this._moreContainer.style.visibility=="hidden"?this._moreContainer.style.visibility="":this._moreContainer.style.visibility="hidden"},this._panels=document.createElement("div"),this._panels.className="panels",e.appendChild(this._panels);let t=document.createElement("slot");t.name="panels",this._panels.appendChild(t),new ResizeObserver(r=>{this._showHideHeaderItems()}).observe(this._headerDiv)}_showHideHeaderItems(){this._moreContainer.style.visibility="hidden";let e=0;rh.removeAllChildnodes(this._moreContainer),rh.removeAllChildnodes(this._headerDiv);let t=!0;for(let i of this.children)if(i.style.display!="none"){let r=i;!this._elementMap.has(r)&&t&&(this.refreshItems(),t=!1);let n=this._elementMap.get(r);this._moreContainer.appendChild(n),(this._headerDiv.children.length==0||e+n.clientWidth/2<this._headerDiv.clientWidth)&&(this._headerDiv.appendChild(n),e+=n.clientWidth)}}connectedCallback(){if(this._firstConnect){this.refreshItems(),this._firstConnect=!1;let e=this.getAttribute("selected-index");e&&(this.selectedIndex=parseInt(e))}}get selectedIndex(){return this._firstConnect?-1:this._selectedIndex}set selectedIndex(e){let t=this._selectedIndex;this._selectedIndex=e,this.children.length&&t!=this._selectedIndex&&this._selectedIndexChanged(t)}refreshItems(){this._headerDiv.innerHTML="";let e=0;for(let t of this.children)if(t.style.display!="none"){let i=t,r=document.createElement("div");r.innerText=i.title,r.title=i.title,r.className="tab-header";let n=e;r.onpointerdown=()=>{let o=this._selectedIndex;this._selectedIndex=n,this._headerDiv.children.length&&this._selectedIndexChanged(o,!0),this._moreContainer.style.visibility="hidden"},this._elementMap.set(i,r),this._headerDiv.appendChild(r),e++}this._showHideHeaderItems(),this._selectedIndexChanged()}_selectedIndexChanged(e,t=!1){let i=-1;for(let r of this.children)if(r.style.display!="none")if(i++,i==this._selectedIndex){r.slot!="panels"&&(r.slot="panels");let n=this._elementMap.get(r);n&&(n.classList.add("selected"),r.activated&&r.activated())}else{r.removeAttribute("slot");let n=this._elementMap.get(r);n&&n.classList.remove("selected")}this.onSelectedTabChanged.emit({newIndex:this._selectedIndex,oldIndex:e,changedViaClick:t}),this._moreContainer.style.visibility="hidden"}onSelectedTabChanged=new Ad};customElements.define("node-projects-designer-tab-control",Ye);var wo=class{host;root;trough;button1;button2;thumb;isConnected=!1;thumbSize=.3;value=0;orientation=!1;clickRepeatDelay=300;clickRepeatInterval=100;defaultThumbMinSize=25;dragStartPos;dragStartValue;eventTimeoutId;pointerCaptureId;pointerCaptureElement;thumbDragging;button1Active;button2Active;troughActive;constructor(e){this.host=e,e.attachShadow({mode:"open"});let t=e.shadowRoot;t.innerHTML=kd,this.root=t.querySelector("#root"),this.trough=t.querySelector("#trough"),this.button1=t.querySelector("#button1"),this.button2=t.querySelector("#button2"),this.thumb=t.querySelector("#thumb"),this.trough.addEventListener("pointerdown",this.onTroughPointerDown),this.trough.addEventListener("pointerup",this.onPointerUp),this.trough.addEventListener("pointercancel",this.onPointerUp),this.button1.addEventListener("pointerdown",i=>this.onButtonPointerDown(i,1)),this.button1.addEventListener("pointerup",this.onPointerUp),this.button1.addEventListener("pointercancel",this.onPointerUp),this.button1.addEventListener("contextmenu",i=>i.preventDefault()),this.button2.addEventListener("pointerdown",i=>this.onButtonPointerDown(i,2)),this.button2.addEventListener("pointerup",this.onPointerUp),this.button2.addEventListener("pointercancel",this.onPointerUp),this.button2.addEventListener("contextmenu",i=>i.preventDefault()),this.thumb.addEventListener("pointerdown",this.onThumbPointerDown),this.thumb.addEventListener("pointerup",this.onPointerUp),this.thumb.addEventListener("pointercancel",this.onPointerUp),this.thumb.addEventListener("pointermove",this.onThumbPointerMove),this.resetInteractionState()}resetInteractionState(){this.thumbDragging=!1,this.button1Active=!1,this.button2Active=!1,this.troughActive=!1}connectedCallback(){this.isConnected=!0,this.resetInteractionState(),this.updateLayout(),this.updateStyle()}disconnectedCallback(){this.isConnected=!1,this.resetInteractionState(),this.stopEventRepetition(),this.stopPointerCapture()}updateLayout(){this.isConnected&&(this.root.classList.toggle("horizontal",!this.orientation),this.root.classList.toggle("vertical",this.orientation),this.thumb.style.display=this.thumbSize==0?"none":"",this.thumb.style.height=this.orientation?qi(this.getEffectiveThumbSize()):"",this.thumb.style.width=this.orientation?"":qi(this.getEffectiveThumbSize()),this.thumb.style.top="",this.thumb.style.left="",this.updateThumbPosition())}updateStyle(){this.isConnected&&(this.thumb.classList.toggle("active",this.thumbDragging),this.button1.classList.toggle("active",this.button1Active),this.button2.classList.toggle("active",this.button2Active),this.troughActive)}updateThumbPosition(){let e=(1-this.getEffectiveThumbSize())*this.value;this.orientation?this.thumb.style.top=qi(e):this.thumb.style.left=qi(e)}getThroughSize(){return this.orientation?this.trough.clientHeight:this.trough.clientWidth}computeThumbMoveValue(e){let t=this.getThroughSize()*(1-this.getEffectiveThumbSize());return t<Pd?0:e/t}setThumbSize(e){let t=Math.max(0,Math.min(1,e));t!=this.thumbSize&&(this.thumbSize=t,this.updateLayout())}getThumbMinSize(){let e=this.getCssVar("--plain-scrollbar-thumb-min-size");if(!e)return this.defaultThumbMinSize;let t=Td(e);return t||this.defaultThumbMinSize}getEffectiveThumbSize(){let e=this.getThumbMinSize(),t=this.getThroughSize();if(!t)return this.thumbSize;let i=Math.min(1,e/t);return Math.max(i,this.thumbSize)}setValue(e){let t=Math.max(0,Math.min(1,e));return t==this.value?!1:(this.value=isNaN(t)?0:t,this.updateThumbPosition(),!0)}setOrientation(e){return e==this.orientation?!1:(this.orientation=e,this.updateLayout(),!0)}getCssVar(e){let t=getComputedStyle(this.root).getPropertyValue(e);return t?t.trim():null}fireEvent(e){let t=new CustomEvent("scrollbar-input",{detail:e});this.host.dispatchEvent(t)}fireEventRepeatedly(e,t,i,r=0){this.stopEventRepetition(),this.fireEvent(e);let n=r==0?t:i,o=()=>this.fireEventRepeatedly(e,t,i,r+1);this.eventTimeoutId=setTimeout(o,n)}stopEventRepetition(){this.eventTimeoutId&&(clearTimeout(this.eventTimeoutId),this.eventTimeoutId=void 0)}startPointerCapture(e,t){this.stopPointerCapture(),e.setPointerCapture(t),this.pointerCaptureElement=e,this.pointerCaptureId=t}stopPointerCapture(){this.pointerCaptureId&&(this.pointerCaptureElement.releasePointerCapture(this.pointerCaptureId),this.pointerCaptureId=void 0)}onTroughPointerDown=e=>{if(!this.isConnected||this.pointerCaptureId||!e.isPrimary||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||e.button!=0)return;let t=this.trough.getBoundingClientRect(),i=this.orientation?e.clientY-t.top:e.clientX-t.left,r=(this.orientation?t.height:t.width)*(1-this.getEffectiveThumbSize())*this.value,o=i>r?"incrementLarge":"decrementLarge";this.troughActive=!0,e.preventDefault(),this.startPointerCapture(this.trough,e.pointerId),this.fireEventRepeatedly(o,this.clickRepeatDelay,this.clickRepeatInterval)};onButtonPointerDown=(e,t)=>{if(!this.isConnected||this.pointerCaptureId||!e.isPrimary||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||e.button!=0)return;switch(t){case 1:this.button1Active=!0;break;case 2:this.button2Active=!0;break}let i=t==1?"decrementSmall":"incrementSmall";this.updateStyle(),e.preventDefault();let r=t==1?this.button1:this.button2;this.startPointerCapture(r,e.pointerId),this.fireEventRepeatedly(i,this.clickRepeatDelay,this.clickRepeatInterval)};onThumbPointerDown=e=>{!this.isConnected||this.pointerCaptureId||!e.isPrimary||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||e.button!=0||(this.dragStartPos=this.orientation?e.clientY:e.clientX,this.dragStartValue=this.value,this.thumbDragging=!0,this.updateStyle(),e.preventDefault(),this.startPointerCapture(this.thumb,e.pointerId))};onThumbPointerMove=e=>{if(!this.isConnected||!e.isPrimary||!this.thumbDragging)return;let i=(this.orientation?e.clientY:e.clientX)-this.dragStartPos,r=this.computeThumbMoveValue(i),n=this.dragStartValue+r;e.preventDefault(),this.setValue(n)&&this.fireEvent("value")};onPointerUp=e=>{this.isConnected&&e.isPrimary&&(this.resetInteractionState(),this.updateStyle(),this.stopEventRepetition(),this.stopPointerCapture(),e.preventDefault())}},So=class extends HTMLElement{widget;constructor(){super(),this.widget=new wo(this);let e=parseFloat(this.getAttribute("value"));if(isNaN(e)||(this.widget.value=e),this.hasOwnProperty("value")){let t=this.value;delete this.value,isNaN(t)||(this.widget.value=t)}}connectedCallback(){this.widget.connectedCallback()}disconnectedCallback(){this.widget.disconnectedCallback()}get thumbSize(){return this.widget.thumbSize}set thumbSize(e){this.widget.setThumbSize(e)}get value(){return this.widget.value}set value(e){this.widget.setValue(e)}get orientation(){return Dd(this.widget.orientation)}set orientation(e){this.widget.setOrientation(nh(e))&&this.setAttribute("orientation",this.orientation)}get orientationBoolean(){return this.widget.orientation}static get observedAttributes(){return["orientation"]}attributeChangedCallback(e,t,i){switch(e){case"orientation":{i&&this.widget.setOrientation(nh(i));break}}}},Pd=1e-9,nt="var(--plain-scrollbar-button-size, 13px)",$i='<path d="M -60 30 h 120 L 0 -30 z" stroke-width="0"/>',Id=`
|
|
924
924
|
:host {
|
|
925
925
|
display: block;
|
|
926
926
|
contain: content;
|
|
@@ -1264,12 +1264,12 @@ declare global {
|
|
|
1264
1264
|
overflow: visible;
|
|
1265
1265
|
}
|
|
1266
1266
|
|
|
1267
|
-
.svg-invisible { stroke: transparent; fill: transparent; pointer-events:
|
|
1267
|
+
.svg-invisible { stroke: transparent; fill: transparent; pointer-events: auto; }
|
|
1268
1268
|
.svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }
|
|
1269
1269
|
.svg-selector { stroke: black; fill: #3899ec55; stroke-width: 1; stroke-dasharray: 2; }
|
|
1270
|
-
.svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events:
|
|
1270
|
+
.svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: auto; }
|
|
1271
1271
|
.svg-position { stroke: black; stroke-dasharray: 2; }
|
|
1272
|
-
.svg-path { stroke: #3899ec; fill: orange; pointer-events:
|
|
1272
|
+
.svg-path { stroke: #3899ec; fill: orange; pointer-events: auto; }
|
|
1273
1273
|
.svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }
|
|
1274
1274
|
.svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }
|
|
1275
1275
|
.svg-toolbar-container { overflow: visible }
|
package/package.json
CHANGED